duck-dev-lib 0.0.25 → 0.0.27

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 (9) hide show
  1. package/README.md +1 -0
  2. package/fesm2022/{duck-dev-lib-en-4OEFIyu1.mjs → duck-dev-lib-en-AryRCkw5.mjs} +86 -3
  3. package/fesm2022/{duck-dev-lib-en-4OEFIyu1.mjs.map → duck-dev-lib-en-AryRCkw5.mjs.map} +1 -1
  4. package/fesm2022/{duck-dev-lib-ru-CcBIFkk3.mjs → duck-dev-lib-ru-D_msyug7.mjs} +86 -3
  5. package/fesm2022/{duck-dev-lib-ru-CcBIFkk3.mjs.map → duck-dev-lib-ru-D_msyug7.mjs.map} +1 -1
  6. package/fesm2022/duck-dev-lib.mjs +374 -155
  7. package/fesm2022/duck-dev-lib.mjs.map +1 -1
  8. package/package.json +1 -1
  9. package/types/duck-dev-lib.d.ts +41 -11
package/fesm2022/duck-dev-lib.mjs CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as i0 from '@angular/core';
2
- import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect, Injectable, inject, ElementRef, ChangeDetectionStrategy } from '@angular/core';
2
+ import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect, Injectable, inject, ElementRef, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
3
+ import * as i1$3 from '@angular/common';
3
4
  import { NgStyle, CommonModule, NgTemplateOutlet } from '@angular/common';
4
5
  import * as i1$2 from '@jsverse/transloco';
5
6
  import { TranslocoPipe, TranslocoModule, TranslocoService } from '@jsverse/transloco';
@@ -7,21 +8,27 @@ import * as i1 from '@angular/forms';
7
8
  import { ReactiveFormsModule } from '@angular/forms';
8
9
  import * as i1$1 from '@angular/platform-browser';
9
10
 
10
- var ButtonEnumColor;
11
- (function (ButtonEnumColor) {
12
- ButtonEnumColor["Orange"] = "orange";
13
- ButtonEnumColor["Dark"] = "dark";
14
- ButtonEnumColor["White"] = "white";
15
- ButtonEnumColor["Gray"] = "gray";
16
- ButtonEnumColor["Violet"] = "violet";
17
- })(ButtonEnumColor || (ButtonEnumColor = {}));
11
+ var AccentEnumColor;
12
+ (function (AccentEnumColor) {
13
+ AccentEnumColor["Orange"] = "orange";
14
+ AccentEnumColor["Dark"] = "dark";
15
+ AccentEnumColor["White"] = "white";
16
+ AccentEnumColor["Gray"] = "gray";
17
+ AccentEnumColor["Violet"] = "violet";
18
+ })(AccentEnumColor || (AccentEnumColor = {}));
18
19
 
19
20
  class DdFlexDirectionDirective {
20
21
  ddFlexDirection = input('row', { ...(ngDevMode ? { debugName: "ddFlexDirection" } : {}) });
21
22
  gap = input(null, { ...(ngDevMode ? { debugName: "gap" } : {}) });
23
+ justifyContent = input('center', { ...(ngDevMode ? { debugName: "justifyContent" } : {}) });
24
+ alignItems = input('center', { ...(ngDevMode ? { debugName: "alignItems" } : {}) });
22
25
  display = 'flex';
23
- alignItems = 'center';
24
- justifyContent = 'center';
26
+ get alignItemsStyle() {
27
+ return this.alignItems();
28
+ }
29
+ get justify() {
30
+ return this.justifyContent();
31
+ }
25
32
  get flexDirection() {
26
33
  return this.ddFlexDirection() === 'col' ? 'column' : 'row';
27
34
  }
@@ -32,7 +39,7 @@ class DdFlexDirectionDirective {
32
39
  return typeof value === 'number' ? `${value}px` : value;
33
40
  }
34
41
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DdFlexDirectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
35
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: DdFlexDirectionDirective, isStandalone: true, selector: "[ddFlex]", inputs: { ddFlexDirection: { classPropertyName: "ddFlexDirection", publicName: "ddFlexDirection", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "this.display", "style.alignItems": "this.alignItems", "style.justifyContent": "this.justifyContent", "style.flexDirection": "this.flexDirection", "style.gap": "this.gapValue" } }, ngImport: i0 });
42
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: DdFlexDirectionDirective, isStandalone: true, selector: "[ddFlex]", inputs: { ddFlexDirection: { classPropertyName: "ddFlexDirection", publicName: "ddFlexDirection", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "this.display", "style.alignItems": "this.alignItemsStyle", "style.justifyContent": "this.justify", "style.flexDirection": "this.flexDirection", "style.gap": "this.gapValue" } }, ngImport: i0 });
36
43
  }
37
44
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DdFlexDirectionDirective, decorators: [{
38
45
  type: Directive,
@@ -40,13 +47,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
40
47
  selector: '[ddFlex]',
41
48
  standalone: true,
42
49
  }]
43
- }], propDecorators: { ddFlexDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "ddFlexDirection", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], display: [{
50
+ }], propDecorators: { ddFlexDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "ddFlexDirection", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], justifyContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "justifyContent", required: false }] }], alignItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignItems", required: false }] }], display: [{
44
51
  type: HostBinding,
45
52
  args: ['style.display']
46
- }], alignItems: [{
53
+ }], alignItemsStyle: [{
47
54
  type: HostBinding,
48
55
  args: ['style.alignItems']
49
- }], justifyContent: [{
56
+ }], justify: [{
50
57
  type: HostBinding,
51
58
  args: ['style.justifyContent']
52
59
  }], flexDirection: [{
@@ -59,14 +66,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
59
66
 
60
67
  class ButtonBlurLift {
61
68
  textButton = input.required({ ...(ngDevMode ? { debugName: "textButton" } : {}) });
62
- colorButton = input(ButtonEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
69
+ colorButton = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
63
70
  padding = input(null, { ...(ngDevMode ? { debugName: "padding" } : {}) });
64
71
  hoverText = input(null, { ...(ngDevMode ? { debugName: "hoverText" } : {}) });
65
72
  buttonStyle = computed(() => {
66
73
  const color = this.colorButton();
67
74
  let bgColor, borderColor, hoverColor, activeColor, textColor, focusShadow;
68
75
  switch (color) {
69
- case ButtonEnumColor.Violet:
76
+ case AccentEnumColor.Violet:
70
77
  bgColor = 'var(--dd-base-secondary)';
71
78
  hoverColor = 'var(--dd-base-secondary)';
72
79
  activeColor = 'var(--dd-base-secondary)';
@@ -74,7 +81,7 @@ class ButtonBlurLift {
74
81
  focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';
75
82
  borderColor = 'var(--dd-base-secondary)';
76
83
  break;
77
- case ButtonEnumColor.Orange:
84
+ case AccentEnumColor.Orange:
78
85
  bgColor = 'var(--dd-base-accent-orange)';
79
86
  hoverColor = 'var(--dd-base-active-orange)';
80
87
  activeColor = 'var(--dd-base-accent-yellow)';
@@ -82,7 +89,7 @@ class ButtonBlurLift {
82
89
  focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';
83
90
  borderColor = 'var(--dd-base-active-orange)';
84
91
  break;
85
- case ButtonEnumColor.White:
92
+ case AccentEnumColor.White:
86
93
  bgColor = 'var(--dd-base-0)';
87
94
  hoverColor = 'var(--dd-base-100)';
88
95
  activeColor = 'var(--dd-base-200)';
@@ -90,7 +97,7 @@ class ButtonBlurLift {
90
97
  focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';
91
98
  borderColor = 'var(--dd-base-300)';
92
99
  break;
93
- case ButtonEnumColor.Gray:
100
+ case AccentEnumColor.Gray:
94
101
  bgColor = 'var(--dd-base-100)';
95
102
  hoverColor = 'var(--dd-base-200)';
96
103
  activeColor = 'var(--dd-base-200)';
@@ -98,7 +105,7 @@ class ButtonBlurLift {
98
105
  focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';
99
106
  borderColor = 'var(--dd-base-400)';
100
107
  break;
101
- case ButtonEnumColor.Dark:
108
+ case AccentEnumColor.Dark:
102
109
  bgColor = 'var(--dd-base-600)';
103
110
  hoverColor = 'var(--dd-base-400)';
104
111
  activeColor = 'var(--dd-base-300)';
@@ -122,7 +129,7 @@ class ButtonBlurLift {
122
129
  '--btn-hover-color': hoverColor,
123
130
  '--btn-active-color': activeColor,
124
131
  '--btn-text-color': textColor,
125
- '--btn-focus-shadow': focusShadow
132
+ '--btn-focus-shadow': focusShadow,
126
133
  };
127
134
  }, { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
128
135
  textLetters = computed(() => {
@@ -135,22 +142,22 @@ class ButtonBlurLift {
135
142
  return hover ? hover.split('').map((char) => (char === ' ' ? '\u00A0' : char)) : [];
136
143
  }, { ...(ngDevMode ? { debugName: "hoverTextLetters" } : {}) });
137
144
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlurLift, deps: [], target: i0.ɵɵFactoryTarget.Component });
138
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ButtonBlurLift, isStandalone: true, selector: "duck-dev-button-blur-lift", inputs: { textButton: { classPropertyName: "textButton", publicName: "textButton", isSignal: true, isRequired: true, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, hoverText: { classPropertyName: "hoverText", publicName: "hoverText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"rounded-button rounded-button--blur-lift\"\n [style]=\"buttonStyle()\"\n>\n <span class=\"button-blur-lift__screen-reader-text\">{{ textButton() }}</span>\n <span\n aria-hidden=\"true\"\n class=\"button-blur-lift__container\"\n >\n <span class=\"button-blur-lift__text\">\n @for (letter of textLetters(); track $index) {\n <span\n [style.--index-outer]=\"$index\"\n class=\"button-blur-lift__letter-outer\"\n >\n <span\n [style.--index]=\"2\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"1\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"0\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n </span>\n }\n </span>\n\n @if (hoverText()) {\n <div class=\"button-blur-lift__hover-text\">\n @for (letter of hoverTextLetters(); track $index) {\n <span\n [style.--index-outer]=\"$index\"\n class=\"button-blur-lift__hover-letter-outer\"\n >\n <span\n [style.--index]=\"2\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"1\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"0\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n </span>\n }\n </div>\n }\n </span>\n <span class=\"button-blur-lift__background\"></span>\n</button>\n", styles: ["@charset \"UTF-8\";:root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:root{--elastic-ease: linear( 0, .2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, .941 24.01%, .8912 25.91%, .8694 27.84%, .8698 29.21%, .8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, .9961 53.26%, .9839 57.54%, .9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, .9981 86.66%, 1 100% );--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--transform-ease: cubic-bezier(.32, .72, 0, 1);--opacity-ease: ease-out}.rounded-button{font-style:normal;font-family:Inter,sans-serif;font-size:18px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;min-width:64px;width:100%;text-wrap:nowrap;background-color:var(--btn-bg-color);color:var(--btn-text-color);padding:var(--btn-padding);border:1px solid var(--btn-border-color);border-radius:69px;cursor:pointer;transition:all .2s ease-in-out,background-color .6s ease-in-out}.rounded-button:hover{background-color:var(--btn-hover-color);box-shadow:0 2px 6px var(--dd-base-300)}.rounded-button:active{background-color:var(--btn-active-color);transform:scale(.98)}.rounded-button:focus{outline:none}.rounded-button:disabled{background-color:var(--nx-base-200)!important;color:var(--nx-base-400)!important;cursor:not-allowed;box-shadow:none!important}.rounded-button:disabled:hover,.rounded-button:disabled:active,.rounded-button:disabled:focus{background-color:var(--nx-base-200)!important;transform:none!important}.rounded-button--blur-lift{position:relative;overflow:hidden;padding:0}.rounded-button--blur-lift:hover{box-shadow:none;background-color:var(--btn-bg-color)}.rounded-button--blur-lift:active{transform:none;background-color:var(--btn-bg-color)}.rounded-button--glide-over{display:grid;place-content:center;position:relative;overflow:hidden;padding:0;background:transparent;border:none;cursor:pointer}.rounded-button--glide-over:hover,.rounded-button--glide-over:active{background:transparent;box-shadow:none}.button-blur-lift__screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.button-blur-lift__container{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);z-index:1;width:100%;height:100%}.button-blur-lift__text{display:flex;position:relative}.button-blur-lift__letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__letter{display:inline-block;transform-origin:center center -.5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__letter[style*=\"--index: 0\"]{position:relative;filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.button-blur-lift__letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.button-blur-lift__hover-text{display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}.button-blur-lift__hover-letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__hover-letter{display:inline-block;transform-origin:center center .5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__hover-letter[style*=\"--index: 0\"]{position:relative;filter:blur(4px);opacity:0;transform:rotateX(180deg)}.button-blur-lift__hover-letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(90deg)}.button-blur-lift__hover-letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(0px);opacity:0;transform:rotateX(0)}.button-blur-lift__background{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--btn-bg-color);transition:background-color .3s ease;border-radius:inherit;z-index:0}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(4px);opacity:0;transform:rotateX(180deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(90deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 2\"]{filter:blur(0px);opacity:0;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 2\"]{filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.rounded-button--blur-lift:hover .button-blur-lift__background{background-color:var(--btn-hover-color)}.rounded-button--blur-lift:not(:has(.button-blur-lift__hover-text)):hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__hover-letter{transition-delay:0s}.button-blur-lift__letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__hover-letter{transition-delay:.03s}.button-blur-lift__letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__hover-letter{transition-delay:.06s}.button-blur-lift__letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__hover-letter{transition-delay:.09s}.button-blur-lift__letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__hover-letter{transition-delay:.12s}.button-blur-lift__letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__hover-letter{transition-delay:.15s}.button-blur-lift__letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__hover-letter{transition-delay:.18s}.button-blur-lift__letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__hover-letter{transition-delay:.21s}.button-blur-lift__letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__hover-letter{transition-delay:.24s}.button-blur-lift__letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__hover-letter{transition-delay:.27s}.button-blur-lift__letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__hover-letter{transition-delay:.3s}.button-blur-lift__letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__hover-letter{transition-delay:.33s}.button-blur-lift__letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__hover-letter{transition-delay:.36s}.button-blur-lift__letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__hover-letter{transition-delay:.39s}.button-blur-lift__letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__hover-letter{transition-delay:.42s}.button-blur-lift__letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__hover-letter{transition-delay:.45s}.button-blur-lift__letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__hover-letter{transition-delay:.48s}.button-blur-lift__letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__hover-letter{transition-delay:.51s}.button-blur-lift__letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__hover-letter{transition-delay:.54s}.button-blur-lift__letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__hover-letter{transition-delay:.57s}.button-blur-lift__letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__hover-letter{transition-delay:.6s}.button-blur-lift__letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__hover-letter{transition-delay:.63s}.button-blur-lift__letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__hover-letter{transition-delay:.66s}.button-blur-lift__letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__hover-letter{transition-delay:.69s}.button-blur-lift__letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__hover-letter{transition-delay:.72s}.button-blur-lift__letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__hover-letter{transition-delay:.75s}.button-blur-lift__letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__hover-letter{transition-delay:.78s}.button-blur-lift__letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__hover-letter{transition-delay:.81s}.button-blur-lift__letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__hover-letter{transition-delay:.84s}.button-blur-lift__letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__hover-letter{transition-delay:.87s}.button-blur-lift__letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__hover-letter{transition-delay:.9s}.rounded-button--blur-lift:active .button-blur-lift__background{background-color:var(--btn-active-color)}.rounded-button--glide-over{display:inline-grid;place-content:center;position:relative;overflow:hidden;border:none;background:transparent;cursor:pointer;border-radius:9999px;transition:all .4s ease;--opacity-ease: ease-in-out;--transform-ease: cubic-bezier(.19, 1, .22, 1);--elastic-ease: cubic-bezier(.68, -.55, .27, 1.55)}.rounded-button--glide-over:hover,.rounded-button--glide-over:focus{outline:none}.button-glide-over__container{display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);position:relative;z-index:2}.button-glide-over__text{position:relative;z-index:1;transition:transform .6s var(--transform-ease);transform:translate(-.375rem)}.button-glide-over__icon{width:1.25rem;height:1.25rem;flex-shrink:0;display:block;position:relative}.button-glide-over__icon svg{width:100%;height:100%;stroke:currentColor;fill:none}.button-glide-over__icon.is-last{margin-left:.5rem;transition:opacity .5s ease,transform .6s var(--elastic-ease);opacity:1}.button-glide-over__icon.is-first{position:absolute;left:0;top:50%;transform:translateY(-50%) translate(-120%);opacity:0;transition:opacity .6s ease,transform .9s var(--elastic-ease)}.button-glide-over__background{position:absolute;inset:0;border-radius:inherit;background:var(--btn-bg-color);transition:background-color .4s ease;z-index:0}.rounded-button--glide-over:hover .button-glide-over__text{transform:translate(2rem)}.rounded-button--glide-over:hover .button-glide-over__icon.is-first{opacity:1;transform:translateY(-50%) translate(100%)}.rounded-button--glide-over:hover .button-glide-over__icon.is-last{opacity:0;transform:translate(100%)}\n"] });
145
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ButtonBlurLift, isStandalone: true, selector: "duck-dev-button-blur-lift", inputs: { textButton: { classPropertyName: "textButton", publicName: "textButton", isSignal: true, isRequired: true, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, hoverText: { classPropertyName: "hoverText", publicName: "hoverText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button type=\"button\" class=\"rounded-button rounded-button--blur-lift\" [style]=\"buttonStyle()\">\n <span class=\"button-blur-lift__screen-reader-text\">{{ textButton() }}</span>\n <span aria-hidden=\"true\" class=\"button-blur-lift__container\">\n <span class=\"button-blur-lift__text\">\n @for (letter of textLetters(); track $index) {\n <span [style.--index-outer]=\"$index\" class=\"button-blur-lift__letter-outer\">\n <span [style.--index]=\"2\" class=\"button-blur-lift__letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"1\" class=\"button-blur-lift__letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"0\" class=\"button-blur-lift__letter\">\n {{ letter }}\n </span>\n </span>\n }\n </span>\n\n @if (hoverText()) {\n <div class=\"button-blur-lift__hover-text\">\n @for (letter of hoverTextLetters(); track $index) {\n <span [style.--index-outer]=\"$index\" class=\"button-blur-lift__hover-letter-outer\">\n <span [style.--index]=\"2\" class=\"button-blur-lift__hover-letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"1\" class=\"button-blur-lift__hover-letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"0\" class=\"button-blur-lift__hover-letter\">\n {{ letter }}\n </span>\n </span>\n }\n </div>\n }\n </span>\n <span class=\"button-blur-lift__background\"></span>\n</button>\n", styles: ["@charset \"UTF-8\";:root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:root{--elastic-ease: linear( 0, .2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, .941 24.01%, .8912 25.91%, .8694 27.84%, .8698 29.21%, .8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, .9961 53.26%, .9839 57.54%, .9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, .9981 86.66%, 1 100% );--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--transform-ease: cubic-bezier(.32, .72, 0, 1);--opacity-ease: ease-out}.rounded-button{font-style:normal;font-family:Inter,sans-serif;font-size:18px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;min-width:64px;width:100%;text-wrap:nowrap;background-color:var(--btn-bg-color);color:var(--btn-text-color);padding:var(--btn-padding);border:1px solid var(--btn-border-color);border-radius:69px;cursor:pointer;transition:all .2s ease-in-out,background-color .6s ease-in-out}.rounded-button:hover{background-color:var(--btn-hover-color);box-shadow:0 2px 6px var(--dd-base-300)}.rounded-button:active{background-color:var(--btn-active-color);transform:scale(.98)}.rounded-button:focus{outline:none}.rounded-button:disabled{background-color:var(--nx-base-200)!important;color:var(--nx-base-400)!important;cursor:not-allowed;box-shadow:none!important}.rounded-button:disabled:hover,.rounded-button:disabled:active,.rounded-button:disabled:focus{background-color:var(--nx-base-200)!important;transform:none!important}.rounded-button--blur-lift{position:relative;overflow:hidden;padding:0}.rounded-button--blur-lift:hover{box-shadow:none;background-color:var(--btn-bg-color)}.rounded-button--blur-lift:active{transform:none;background-color:var(--btn-bg-color)}.rounded-button--glide-over{display:grid;place-content:center;position:relative;overflow:hidden;padding:0;background:transparent;border:none;cursor:pointer}.rounded-button--glide-over:hover,.rounded-button--glide-over:active{background:transparent;box-shadow:none}.button-blur-lift__screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.button-blur-lift__container{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);z-index:1;width:100%;height:100%}.button-blur-lift__text{display:flex;position:relative}.button-blur-lift__letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__letter{display:inline-block;transform-origin:center center -.5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__letter[style*=\"--index: 0\"]{position:relative;filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.button-blur-lift__letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.button-blur-lift__hover-text{display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}.button-blur-lift__hover-letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__hover-letter{display:inline-block;transform-origin:center center .5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__hover-letter[style*=\"--index: 0\"]{position:relative;filter:blur(4px);opacity:0;transform:rotateX(180deg)}.button-blur-lift__hover-letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(90deg)}.button-blur-lift__hover-letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(0px);opacity:0;transform:rotateX(0)}.button-blur-lift__background{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--btn-bg-color);transition:background-color .3s ease;border-radius:inherit;z-index:0}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(4px);opacity:0;transform:rotateX(180deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(90deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 2\"]{filter:blur(0px);opacity:0;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 2\"]{filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.rounded-button--blur-lift:hover .button-blur-lift__background{background-color:var(--btn-hover-color)}.rounded-button--blur-lift:not(:has(.button-blur-lift__hover-text)):hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__hover-letter{transition-delay:0s}.button-blur-lift__letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__hover-letter{transition-delay:.03s}.button-blur-lift__letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__hover-letter{transition-delay:.06s}.button-blur-lift__letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__hover-letter{transition-delay:.09s}.button-blur-lift__letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__hover-letter{transition-delay:.12s}.button-blur-lift__letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__hover-letter{transition-delay:.15s}.button-blur-lift__letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__hover-letter{transition-delay:.18s}.button-blur-lift__letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__hover-letter{transition-delay:.21s}.button-blur-lift__letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__hover-letter{transition-delay:.24s}.button-blur-lift__letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__hover-letter{transition-delay:.27s}.button-blur-lift__letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__hover-letter{transition-delay:.3s}.button-blur-lift__letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__hover-letter{transition-delay:.33s}.button-blur-lift__letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__hover-letter{transition-delay:.36s}.button-blur-lift__letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__hover-letter{transition-delay:.39s}.button-blur-lift__letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__hover-letter{transition-delay:.42s}.button-blur-lift__letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__hover-letter{transition-delay:.45s}.button-blur-lift__letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__hover-letter{transition-delay:.48s}.button-blur-lift__letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__hover-letter{transition-delay:.51s}.button-blur-lift__letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__hover-letter{transition-delay:.54s}.button-blur-lift__letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__hover-letter{transition-delay:.57s}.button-blur-lift__letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__hover-letter{transition-delay:.6s}.button-blur-lift__letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__hover-letter{transition-delay:.63s}.button-blur-lift__letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__hover-letter{transition-delay:.66s}.button-blur-lift__letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__hover-letter{transition-delay:.69s}.button-blur-lift__letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__hover-letter{transition-delay:.72s}.button-blur-lift__letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__hover-letter{transition-delay:.75s}.button-blur-lift__letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__hover-letter{transition-delay:.78s}.button-blur-lift__letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__hover-letter{transition-delay:.81s}.button-blur-lift__letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__hover-letter{transition-delay:.84s}.button-blur-lift__letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__hover-letter{transition-delay:.87s}.button-blur-lift__letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__hover-letter{transition-delay:.9s}.rounded-button--blur-lift:active .button-blur-lift__background{background-color:var(--btn-active-color)}.rounded-button--glide-over{display:inline-grid;place-content:center;position:relative;overflow:hidden;border:none;background:transparent;cursor:pointer;border-radius:9999px;transition:all .4s ease;--opacity-ease: ease-in-out;--transform-ease: cubic-bezier(.19, 1, .22, 1);--elastic-ease: cubic-bezier(.68, -.55, .27, 1.55)}.rounded-button--glide-over:hover,.rounded-button--glide-over:focus{outline:none}.button-glide-over__container{display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);position:relative;z-index:2}.button-glide-over__text{position:relative;z-index:1;transition:transform .6s var(--transform-ease);transform:translate(-.375rem)}.button-glide-over__icon{width:1.25rem;height:1.25rem;flex-shrink:0;display:block;position:relative}.button-glide-over__icon svg{width:100%;height:100%;stroke:currentColor;fill:none}.button-glide-over__icon.is-last{margin-left:.5rem;transition:opacity .5s ease,transform .6s var(--elastic-ease);opacity:1}.button-glide-over__icon.is-first{position:absolute;left:0;top:50%;transform:translateY(-50%) translate(-120%);opacity:0;transition:opacity .6s ease,transform .9s var(--elastic-ease)}.button-glide-over__background{position:absolute;inset:0;border-radius:inherit;background:var(--btn-bg-color);transition:background-color .4s ease;z-index:0}.rounded-button--glide-over:hover .button-glide-over__text{transform:translate(2rem)}.rounded-button--glide-over:hover .button-glide-over__icon.is-first{opacity:1;transform:translateY(-50%) translate(100%)}.rounded-button--glide-over:hover .button-glide-over__icon.is-last{opacity:0;transform:translate(100%)}\n"] });
139
146
  }
140
147
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlurLift, decorators: [{
141
148
  type: Component,
142
- args: [{ selector: 'duck-dev-button-blur-lift', imports: [], template: "<button\n type=\"button\"\n class=\"rounded-button rounded-button--blur-lift\"\n [style]=\"buttonStyle()\"\n>\n <span class=\"button-blur-lift__screen-reader-text\">{{ textButton() }}</span>\n <span\n aria-hidden=\"true\"\n class=\"button-blur-lift__container\"\n >\n <span class=\"button-blur-lift__text\">\n @for (letter of textLetters(); track $index) {\n <span\n [style.--index-outer]=\"$index\"\n class=\"button-blur-lift__letter-outer\"\n >\n <span\n [style.--index]=\"2\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"1\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"0\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n </span>\n }\n </span>\n\n @if (hoverText()) {\n <div class=\"button-blur-lift__hover-text\">\n @for (letter of hoverTextLetters(); track $index) {\n <span\n [style.--index-outer]=\"$index\"\n class=\"button-blur-lift__hover-letter-outer\"\n >\n <span\n [style.--index]=\"2\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"1\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"0\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n </span>\n }\n </div>\n }\n </span>\n <span class=\"button-blur-lift__background\"></span>\n</button>\n", styles: ["@charset \"UTF-8\";:root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:root{--elastic-ease: linear( 0, .2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, .941 24.01%, .8912 25.91%, .8694 27.84%, .8698 29.21%, .8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, .9961 53.26%, .9839 57.54%, .9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, .9981 86.66%, 1 100% );--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--transform-ease: cubic-bezier(.32, .72, 0, 1);--opacity-ease: ease-out}.rounded-button{font-style:normal;font-family:Inter,sans-serif;font-size:18px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;min-width:64px;width:100%;text-wrap:nowrap;background-color:var(--btn-bg-color);color:var(--btn-text-color);padding:var(--btn-padding);border:1px solid var(--btn-border-color);border-radius:69px;cursor:pointer;transition:all .2s ease-in-out,background-color .6s ease-in-out}.rounded-button:hover{background-color:var(--btn-hover-color);box-shadow:0 2px 6px var(--dd-base-300)}.rounded-button:active{background-color:var(--btn-active-color);transform:scale(.98)}.rounded-button:focus{outline:none}.rounded-button:disabled{background-color:var(--nx-base-200)!important;color:var(--nx-base-400)!important;cursor:not-allowed;box-shadow:none!important}.rounded-button:disabled:hover,.rounded-button:disabled:active,.rounded-button:disabled:focus{background-color:var(--nx-base-200)!important;transform:none!important}.rounded-button--blur-lift{position:relative;overflow:hidden;padding:0}.rounded-button--blur-lift:hover{box-shadow:none;background-color:var(--btn-bg-color)}.rounded-button--blur-lift:active{transform:none;background-color:var(--btn-bg-color)}.rounded-button--glide-over{display:grid;place-content:center;position:relative;overflow:hidden;padding:0;background:transparent;border:none;cursor:pointer}.rounded-button--glide-over:hover,.rounded-button--glide-over:active{background:transparent;box-shadow:none}.button-blur-lift__screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.button-blur-lift__container{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);z-index:1;width:100%;height:100%}.button-blur-lift__text{display:flex;position:relative}.button-blur-lift__letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__letter{display:inline-block;transform-origin:center center -.5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__letter[style*=\"--index: 0\"]{position:relative;filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.button-blur-lift__letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.button-blur-lift__hover-text{display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}.button-blur-lift__hover-letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__hover-letter{display:inline-block;transform-origin:center center .5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__hover-letter[style*=\"--index: 0\"]{position:relative;filter:blur(4px);opacity:0;transform:rotateX(180deg)}.button-blur-lift__hover-letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(90deg)}.button-blur-lift__hover-letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(0px);opacity:0;transform:rotateX(0)}.button-blur-lift__background{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--btn-bg-color);transition:background-color .3s ease;border-radius:inherit;z-index:0}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(4px);opacity:0;transform:rotateX(180deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(90deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 2\"]{filter:blur(0px);opacity:0;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 2\"]{filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.rounded-button--blur-lift:hover .button-blur-lift__background{background-color:var(--btn-hover-color)}.rounded-button--blur-lift:not(:has(.button-blur-lift__hover-text)):hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__hover-letter{transition-delay:0s}.button-blur-lift__letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__hover-letter{transition-delay:.03s}.button-blur-lift__letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__hover-letter{transition-delay:.06s}.button-blur-lift__letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__hover-letter{transition-delay:.09s}.button-blur-lift__letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__hover-letter{transition-delay:.12s}.button-blur-lift__letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__hover-letter{transition-delay:.15s}.button-blur-lift__letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__hover-letter{transition-delay:.18s}.button-blur-lift__letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__hover-letter{transition-delay:.21s}.button-blur-lift__letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__hover-letter{transition-delay:.24s}.button-blur-lift__letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__hover-letter{transition-delay:.27s}.button-blur-lift__letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__hover-letter{transition-delay:.3s}.button-blur-lift__letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__hover-letter{transition-delay:.33s}.button-blur-lift__letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__hover-letter{transition-delay:.36s}.button-blur-lift__letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__hover-letter{transition-delay:.39s}.button-blur-lift__letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__hover-letter{transition-delay:.42s}.button-blur-lift__letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__hover-letter{transition-delay:.45s}.button-blur-lift__letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__hover-letter{transition-delay:.48s}.button-blur-lift__letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__hover-letter{transition-delay:.51s}.button-blur-lift__letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__hover-letter{transition-delay:.54s}.button-blur-lift__letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__hover-letter{transition-delay:.57s}.button-blur-lift__letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__hover-letter{transition-delay:.6s}.button-blur-lift__letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__hover-letter{transition-delay:.63s}.button-blur-lift__letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__hover-letter{transition-delay:.66s}.button-blur-lift__letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__hover-letter{transition-delay:.69s}.button-blur-lift__letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__hover-letter{transition-delay:.72s}.button-blur-lift__letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__hover-letter{transition-delay:.75s}.button-blur-lift__letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__hover-letter{transition-delay:.78s}.button-blur-lift__letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__hover-letter{transition-delay:.81s}.button-blur-lift__letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__hover-letter{transition-delay:.84s}.button-blur-lift__letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__hover-letter{transition-delay:.87s}.button-blur-lift__letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__hover-letter{transition-delay:.9s}.rounded-button--blur-lift:active .button-blur-lift__background{background-color:var(--btn-active-color)}.rounded-button--glide-over{display:inline-grid;place-content:center;position:relative;overflow:hidden;border:none;background:transparent;cursor:pointer;border-radius:9999px;transition:all .4s ease;--opacity-ease: ease-in-out;--transform-ease: cubic-bezier(.19, 1, .22, 1);--elastic-ease: cubic-bezier(.68, -.55, .27, 1.55)}.rounded-button--glide-over:hover,.rounded-button--glide-over:focus{outline:none}.button-glide-over__container{display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);position:relative;z-index:2}.button-glide-over__text{position:relative;z-index:1;transition:transform .6s var(--transform-ease);transform:translate(-.375rem)}.button-glide-over__icon{width:1.25rem;height:1.25rem;flex-shrink:0;display:block;position:relative}.button-glide-over__icon svg{width:100%;height:100%;stroke:currentColor;fill:none}.button-glide-over__icon.is-last{margin-left:.5rem;transition:opacity .5s ease,transform .6s var(--elastic-ease);opacity:1}.button-glide-over__icon.is-first{position:absolute;left:0;top:50%;transform:translateY(-50%) translate(-120%);opacity:0;transition:opacity .6s ease,transform .9s var(--elastic-ease)}.button-glide-over__background{position:absolute;inset:0;border-radius:inherit;background:var(--btn-bg-color);transition:background-color .4s ease;z-index:0}.rounded-button--glide-over:hover .button-glide-over__text{transform:translate(2rem)}.rounded-button--glide-over:hover .button-glide-over__icon.is-first{opacity:1;transform:translateY(-50%) translate(100%)}.rounded-button--glide-over:hover .button-glide-over__icon.is-last{opacity:0;transform:translate(100%)}\n"] }]
149
+ args: [{ selector: 'duck-dev-button-blur-lift', imports: [], template: "<button type=\"button\" class=\"rounded-button rounded-button--blur-lift\" [style]=\"buttonStyle()\">\n <span class=\"button-blur-lift__screen-reader-text\">{{ textButton() }}</span>\n <span aria-hidden=\"true\" class=\"button-blur-lift__container\">\n <span class=\"button-blur-lift__text\">\n @for (letter of textLetters(); track $index) {\n <span [style.--index-outer]=\"$index\" class=\"button-blur-lift__letter-outer\">\n <span [style.--index]=\"2\" class=\"button-blur-lift__letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"1\" class=\"button-blur-lift__letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"0\" class=\"button-blur-lift__letter\">\n {{ letter }}\n </span>\n </span>\n }\n </span>\n\n @if (hoverText()) {\n <div class=\"button-blur-lift__hover-text\">\n @for (letter of hoverTextLetters(); track $index) {\n <span [style.--index-outer]=\"$index\" class=\"button-blur-lift__hover-letter-outer\">\n <span [style.--index]=\"2\" class=\"button-blur-lift__hover-letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"1\" class=\"button-blur-lift__hover-letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"0\" class=\"button-blur-lift__hover-letter\">\n {{ letter }}\n </span>\n </span>\n }\n </div>\n }\n </span>\n <span class=\"button-blur-lift__background\"></span>\n</button>\n", styles: ["@charset \"UTF-8\";:root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:root{--elastic-ease: linear( 0, .2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, .941 24.01%, .8912 25.91%, .8694 27.84%, .8698 29.21%, .8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, .9961 53.26%, .9839 57.54%, .9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, .9981 86.66%, 1 100% );--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--transform-ease: cubic-bezier(.32, .72, 0, 1);--opacity-ease: ease-out}.rounded-button{font-style:normal;font-family:Inter,sans-serif;font-size:18px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;min-width:64px;width:100%;text-wrap:nowrap;background-color:var(--btn-bg-color);color:var(--btn-text-color);padding:var(--btn-padding);border:1px solid var(--btn-border-color);border-radius:69px;cursor:pointer;transition:all .2s ease-in-out,background-color .6s ease-in-out}.rounded-button:hover{background-color:var(--btn-hover-color);box-shadow:0 2px 6px var(--dd-base-300)}.rounded-button:active{background-color:var(--btn-active-color);transform:scale(.98)}.rounded-button:focus{outline:none}.rounded-button:disabled{background-color:var(--nx-base-200)!important;color:var(--nx-base-400)!important;cursor:not-allowed;box-shadow:none!important}.rounded-button:disabled:hover,.rounded-button:disabled:active,.rounded-button:disabled:focus{background-color:var(--nx-base-200)!important;transform:none!important}.rounded-button--blur-lift{position:relative;overflow:hidden;padding:0}.rounded-button--blur-lift:hover{box-shadow:none;background-color:var(--btn-bg-color)}.rounded-button--blur-lift:active{transform:none;background-color:var(--btn-bg-color)}.rounded-button--glide-over{display:grid;place-content:center;position:relative;overflow:hidden;padding:0;background:transparent;border:none;cursor:pointer}.rounded-button--glide-over:hover,.rounded-button--glide-over:active{background:transparent;box-shadow:none}.button-blur-lift__screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.button-blur-lift__container{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);z-index:1;width:100%;height:100%}.button-blur-lift__text{display:flex;position:relative}.button-blur-lift__letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__letter{display:inline-block;transform-origin:center center -.5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__letter[style*=\"--index: 0\"]{position:relative;filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.button-blur-lift__letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.button-blur-lift__hover-text{display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}.button-blur-lift__hover-letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__hover-letter{display:inline-block;transform-origin:center center .5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__hover-letter[style*=\"--index: 0\"]{position:relative;filter:blur(4px);opacity:0;transform:rotateX(180deg)}.button-blur-lift__hover-letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(90deg)}.button-blur-lift__hover-letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(0px);opacity:0;transform:rotateX(0)}.button-blur-lift__background{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--btn-bg-color);transition:background-color .3s ease;border-radius:inherit;z-index:0}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(4px);opacity:0;transform:rotateX(180deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(90deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 2\"]{filter:blur(0px);opacity:0;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 2\"]{filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.rounded-button--blur-lift:hover .button-blur-lift__background{background-color:var(--btn-hover-color)}.rounded-button--blur-lift:not(:has(.button-blur-lift__hover-text)):hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__hover-letter{transition-delay:0s}.button-blur-lift__letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__hover-letter{transition-delay:.03s}.button-blur-lift__letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__hover-letter{transition-delay:.06s}.button-blur-lift__letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__hover-letter{transition-delay:.09s}.button-blur-lift__letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__hover-letter{transition-delay:.12s}.button-blur-lift__letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__hover-letter{transition-delay:.15s}.button-blur-lift__letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__hover-letter{transition-delay:.18s}.button-blur-lift__letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__hover-letter{transition-delay:.21s}.button-blur-lift__letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__hover-letter{transition-delay:.24s}.button-blur-lift__letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__hover-letter{transition-delay:.27s}.button-blur-lift__letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__hover-letter{transition-delay:.3s}.button-blur-lift__letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__hover-letter{transition-delay:.33s}.button-blur-lift__letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__hover-letter{transition-delay:.36s}.button-blur-lift__letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__hover-letter{transition-delay:.39s}.button-blur-lift__letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__hover-letter{transition-delay:.42s}.button-blur-lift__letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__hover-letter{transition-delay:.45s}.button-blur-lift__letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__hover-letter{transition-delay:.48s}.button-blur-lift__letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__hover-letter{transition-delay:.51s}.button-blur-lift__letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__hover-letter{transition-delay:.54s}.button-blur-lift__letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__hover-letter{transition-delay:.57s}.button-blur-lift__letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__hover-letter{transition-delay:.6s}.button-blur-lift__letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__hover-letter{transition-delay:.63s}.button-blur-lift__letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__hover-letter{transition-delay:.66s}.button-blur-lift__letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__hover-letter{transition-delay:.69s}.button-blur-lift__letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__hover-letter{transition-delay:.72s}.button-blur-lift__letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__hover-letter{transition-delay:.75s}.button-blur-lift__letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__hover-letter{transition-delay:.78s}.button-blur-lift__letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__hover-letter{transition-delay:.81s}.button-blur-lift__letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__hover-letter{transition-delay:.84s}.button-blur-lift__letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__hover-letter{transition-delay:.87s}.button-blur-lift__letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__hover-letter{transition-delay:.9s}.rounded-button--blur-lift:active .button-blur-lift__background{background-color:var(--btn-active-color)}.rounded-button--glide-over{display:inline-grid;place-content:center;position:relative;overflow:hidden;border:none;background:transparent;cursor:pointer;border-radius:9999px;transition:all .4s ease;--opacity-ease: ease-in-out;--transform-ease: cubic-bezier(.19, 1, .22, 1);--elastic-ease: cubic-bezier(.68, -.55, .27, 1.55)}.rounded-button--glide-over:hover,.rounded-button--glide-over:focus{outline:none}.button-glide-over__container{display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);position:relative;z-index:2}.button-glide-over__text{position:relative;z-index:1;transition:transform .6s var(--transform-ease);transform:translate(-.375rem)}.button-glide-over__icon{width:1.25rem;height:1.25rem;flex-shrink:0;display:block;position:relative}.button-glide-over__icon svg{width:100%;height:100%;stroke:currentColor;fill:none}.button-glide-over__icon.is-last{margin-left:.5rem;transition:opacity .5s ease,transform .6s var(--elastic-ease);opacity:1}.button-glide-over__icon.is-first{position:absolute;left:0;top:50%;transform:translateY(-50%) translate(-120%);opacity:0;transition:opacity .6s ease,transform .9s var(--elastic-ease)}.button-glide-over__background{position:absolute;inset:0;border-radius:inherit;background:var(--btn-bg-color);transition:background-color .4s ease;z-index:0}.rounded-button--glide-over:hover .button-glide-over__text{transform:translate(2rem)}.rounded-button--glide-over:hover .button-glide-over__icon.is-first{opacity:1;transform:translateY(-50%) translate(100%)}.rounded-button--glide-over:hover .button-glide-over__icon.is-last{opacity:0;transform:translate(100%)}\n"] }]
143
150
  }], propDecorators: { textButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "textButton", required: true }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], hoverText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverText", required: false }] }] } });
144
151
 
145
152
  class ButtonGlideOver {
146
153
  textButton = input.required({ ...(ngDevMode ? { debugName: "textButton" } : {}) });
147
- colorButton = input(ButtonEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
154
+ colorButton = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
148
155
  padding = input(null, { ...(ngDevMode ? { debugName: "padding" } : {}) });
149
156
  buttonStyle = computed(() => {
150
157
  const color = this.colorButton();
151
158
  let bgColor, borderColor, hoverColor, activeColor, textColor, focusShadow;
152
159
  switch (color) {
153
- case ButtonEnumColor.Violet:
160
+ case AccentEnumColor.Violet:
154
161
  bgColor = 'var(--dd-base-secondary)';
155
162
  hoverColor = 'var(--dd-base-secondary)';
156
163
  activeColor = 'var(--dd-base-secondary)';
@@ -158,7 +165,7 @@ class ButtonGlideOver {
158
165
  focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';
159
166
  borderColor = 'var(--dd-base-secondary)';
160
167
  break;
161
- case ButtonEnumColor.Orange:
168
+ case AccentEnumColor.Orange:
162
169
  bgColor = 'var(--dd-base-accent-orange)';
163
170
  hoverColor = 'var(--dd-base-active-orange)';
164
171
  activeColor = 'var(--dd-base-accent-yellow)';
@@ -166,7 +173,7 @@ class ButtonGlideOver {
166
173
  focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';
167
174
  borderColor = 'var(--dd-base-active-orange)';
168
175
  break;
169
- case ButtonEnumColor.White:
176
+ case AccentEnumColor.White:
170
177
  bgColor = 'var(--dd-base-0)';
171
178
  hoverColor = 'var(--dd-base-100)';
172
179
  activeColor = 'var(--dd-base-200)';
@@ -174,7 +181,7 @@ class ButtonGlideOver {
174
181
  focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';
175
182
  borderColor = 'var(--dd-base-300)';
176
183
  break;
177
- case ButtonEnumColor.Gray:
184
+ case AccentEnumColor.Gray:
178
185
  bgColor = 'var(--dd-base-100)';
179
186
  hoverColor = 'var(--dd-base-200)';
180
187
  activeColor = 'var(--dd-base-200)';
@@ -182,7 +189,7 @@ class ButtonGlideOver {
182
189
  focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';
183
190
  borderColor = 'var(--dd-base-400)';
184
191
  break;
185
- case ButtonEnumColor.Dark:
192
+ case AccentEnumColor.Dark:
186
193
  bgColor = 'var(--dd-base-600)';
187
194
  hoverColor = 'var(--dd-base-400)';
188
195
  activeColor = 'var(--dd-base-300)';
@@ -206,15 +213,15 @@ class ButtonGlideOver {
206
213
  '--btn-hover-color': hoverColor,
207
214
  '--btn-active-color': activeColor,
208
215
  '--btn-text-color': textColor,
209
- '--btn-focus-shadow': focusShadow
216
+ '--btn-focus-shadow': focusShadow,
210
217
  };
211
218
  }, { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
212
219
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonGlideOver, deps: [], target: i0.ɵɵFactoryTarget.Component });
213
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonGlideOver, isStandalone: true, selector: "duck-dev-button-glide-over", inputs: { textButton: { classPropertyName: "textButton", publicName: "textButton", isSignal: true, isRequired: true, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"rounded-button rounded-button--glide-over\"\n [style]=\"buttonStyle()\"\n>\n<span class=\"button-glide-over__container\">\n <span class=\"button-glide-over__icon is-first\">\n <svg\n class=\"button-glide-over__icon-item\"\n style=\"--index: 3\"\n viewBox=\"0 0 256 256\"\n >\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"24\"\n d=\"M40 128h176M144 56l72 72-72 72\"\n />\n </svg>\n </span>\n\n <span class=\"button-glide-over__text\">{{ textButton() }}</span>\n\n <span class=\"button-glide-over__icon is-last\">\n <svg\n class=\"button-glide-over__icon-item\"\n style=\"--index: 0\"\n viewBox=\"0 0 256 256\"\n >\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"20\"\n d=\"M40 128h176M144 56l72 72-72 72\"\n />\n </svg>\n </span>\n </span>\n\n<span class=\"button-glide-over__background\"></span>\n</button>\n", styles: ["@charset \"UTF-8\";:root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:root{--elastic-ease: linear( 0, .2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, .941 24.01%, .8912 25.91%, .8694 27.84%, .8698 29.21%, .8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, .9961 53.26%, .9839 57.54%, .9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, .9981 86.66%, 1 100% );--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--transform-ease: cubic-bezier(.32, .72, 0, 1);--opacity-ease: ease-out}.rounded-button{font-style:normal;font-family:Inter,sans-serif;font-size:18px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;min-width:64px;width:100%;text-wrap:nowrap;background-color:var(--btn-bg-color);color:var(--btn-text-color);padding:var(--btn-padding);border:1px solid var(--btn-border-color);border-radius:69px;cursor:pointer;transition:all .2s ease-in-out,background-color .6s ease-in-out}.rounded-button:hover{background-color:var(--btn-hover-color);box-shadow:0 2px 6px var(--dd-base-300)}.rounded-button:active{background-color:var(--btn-active-color);transform:scale(.98)}.rounded-button:focus{outline:none}.rounded-button:disabled{background-color:var(--nx-base-200)!important;color:var(--nx-base-400)!important;cursor:not-allowed;box-shadow:none!important}.rounded-button:disabled:hover,.rounded-button:disabled:active,.rounded-button:disabled:focus{background-color:var(--nx-base-200)!important;transform:none!important}.rounded-button--blur-lift{position:relative;overflow:hidden;padding:0}.rounded-button--blur-lift:hover{box-shadow:none;background-color:var(--btn-bg-color)}.rounded-button--blur-lift:active{transform:none;background-color:var(--btn-bg-color)}.rounded-button--glide-over{display:grid;place-content:center;position:relative;overflow:hidden;padding:0;background:transparent;border:none;cursor:pointer}.rounded-button--glide-over:hover,.rounded-button--glide-over:active{background:transparent;box-shadow:none}.button-blur-lift__screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.button-blur-lift__container{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);z-index:1;width:100%;height:100%}.button-blur-lift__text{display:flex;position:relative}.button-blur-lift__letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__letter{display:inline-block;transform-origin:center center -.5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__letter[style*=\"--index: 0\"]{position:relative;filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.button-blur-lift__letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.button-blur-lift__hover-text{display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}.button-blur-lift__hover-letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__hover-letter{display:inline-block;transform-origin:center center .5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__hover-letter[style*=\"--index: 0\"]{position:relative;filter:blur(4px);opacity:0;transform:rotateX(180deg)}.button-blur-lift__hover-letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(90deg)}.button-blur-lift__hover-letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(0px);opacity:0;transform:rotateX(0)}.button-blur-lift__background{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--btn-bg-color);transition:background-color .3s ease;border-radius:inherit;z-index:0}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(4px);opacity:0;transform:rotateX(180deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(90deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 2\"]{filter:blur(0px);opacity:0;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 2\"]{filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.rounded-button--blur-lift:hover .button-blur-lift__background{background-color:var(--btn-hover-color)}.rounded-button--blur-lift:not(:has(.button-blur-lift__hover-text)):hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__hover-letter{transition-delay:0s}.button-blur-lift__letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__hover-letter{transition-delay:.03s}.button-blur-lift__letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__hover-letter{transition-delay:.06s}.button-blur-lift__letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__hover-letter{transition-delay:.09s}.button-blur-lift__letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__hover-letter{transition-delay:.12s}.button-blur-lift__letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__hover-letter{transition-delay:.15s}.button-blur-lift__letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__hover-letter{transition-delay:.18s}.button-blur-lift__letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__hover-letter{transition-delay:.21s}.button-blur-lift__letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__hover-letter{transition-delay:.24s}.button-blur-lift__letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__hover-letter{transition-delay:.27s}.button-blur-lift__letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__hover-letter{transition-delay:.3s}.button-blur-lift__letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__hover-letter{transition-delay:.33s}.button-blur-lift__letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__hover-letter{transition-delay:.36s}.button-blur-lift__letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__hover-letter{transition-delay:.39s}.button-blur-lift__letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__hover-letter{transition-delay:.42s}.button-blur-lift__letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__hover-letter{transition-delay:.45s}.button-blur-lift__letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__hover-letter{transition-delay:.48s}.button-blur-lift__letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__hover-letter{transition-delay:.51s}.button-blur-lift__letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__hover-letter{transition-delay:.54s}.button-blur-lift__letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__hover-letter{transition-delay:.57s}.button-blur-lift__letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__hover-letter{transition-delay:.6s}.button-blur-lift__letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__hover-letter{transition-delay:.63s}.button-blur-lift__letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__hover-letter{transition-delay:.66s}.button-blur-lift__letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__hover-letter{transition-delay:.69s}.button-blur-lift__letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__hover-letter{transition-delay:.72s}.button-blur-lift__letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__hover-letter{transition-delay:.75s}.button-blur-lift__letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__hover-letter{transition-delay:.78s}.button-blur-lift__letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__hover-letter{transition-delay:.81s}.button-blur-lift__letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__hover-letter{transition-delay:.84s}.button-blur-lift__letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__hover-letter{transition-delay:.87s}.button-blur-lift__letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__hover-letter{transition-delay:.9s}.rounded-button--blur-lift:active .button-blur-lift__background{background-color:var(--btn-active-color)}.rounded-button--glide-over{display:inline-grid;place-content:center;position:relative;overflow:hidden;border:none;background:transparent;cursor:pointer;border-radius:9999px;transition:all .4s ease;--opacity-ease: ease-in-out;--transform-ease: cubic-bezier(.19, 1, .22, 1);--elastic-ease: cubic-bezier(.68, -.55, .27, 1.55)}.rounded-button--glide-over:hover,.rounded-button--glide-over:focus{outline:none}.button-glide-over__container{display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);position:relative;z-index:1}.button-glide-over__text{position:relative;z-index:1;transition:transform .6s var(--transform-ease);transform:translate(-.375rem)}.button-glide-over__icon{width:1.25rem;height:1.25rem;flex-shrink:0;display:block;position:relative}.button-glide-over__icon svg{width:100%;height:100%;stroke:currentColor;fill:none}.button-glide-over__icon.is-last{margin-left:.5rem;transition:opacity .5s ease,transform .6s var(--elastic-ease);opacity:1}.button-glide-over__icon.is-first{position:absolute;left:0;top:50%;transform:translateY(-50%) translate(-120%);opacity:0;transition:opacity .6s ease,transform .9s var(--elastic-ease)}.button-glide-over__background{position:absolute;inset:0;border-radius:inherit;background:var(--btn-bg-color);transition:background-color .4s ease;z-index:0}.rounded-button--glide-over:hover .button-glide-over__text{transform:translate(2rem)}.rounded-button--glide-over:hover .button-glide-over__icon.is-first{opacity:1;transform:translateY(-50%) translate(100%)}.rounded-button--glide-over:hover .button-glide-over__icon.is-last{opacity:0;transform:translate(100%)}.button-glide-over__text{white-space:normal;word-break:break-word;text-align:center;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n"] });
220
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonGlideOver, isStandalone: true, selector: "duck-dev-button-glide-over", inputs: { textButton: { classPropertyName: "textButton", publicName: "textButton", isSignal: true, isRequired: true, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button type=\"button\" class=\"rounded-button rounded-button--glide-over\" [style]=\"buttonStyle()\">\n <span class=\"button-glide-over__container\">\n <span class=\"button-glide-over__icon is-first\">\n <svg class=\"button-glide-over__icon-item\" style=\"--index: 3\" viewBox=\"0 0 256 256\">\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"24\"\n d=\"M40 128h176M144 56l72 72-72 72\"\n />\n </svg>\n </span>\n\n <span class=\"button-glide-over__text\">{{ textButton() }}</span>\n\n <span class=\"button-glide-over__icon is-last\">\n <svg class=\"button-glide-over__icon-item\" style=\"--index: 0\" viewBox=\"0 0 256 256\">\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"20\"\n d=\"M40 128h176M144 56l72 72-72 72\"\n />\n </svg>\n </span>\n </span>\n\n <span class=\"button-glide-over__background\"></span>\n</button>\n", styles: ["@charset \"UTF-8\";:root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:root{--elastic-ease: linear( 0, .2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, .941 24.01%, .8912 25.91%, .8694 27.84%, .8698 29.21%, .8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, .9961 53.26%, .9839 57.54%, .9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, .9981 86.66%, 1 100% );--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--transform-ease: cubic-bezier(.32, .72, 0, 1);--opacity-ease: ease-out}.rounded-button{font-style:normal;font-family:Inter,sans-serif;font-size:18px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;min-width:64px;width:100%;text-wrap:nowrap;background-color:var(--btn-bg-color);color:var(--btn-text-color);padding:var(--btn-padding);border:1px solid var(--btn-border-color);border-radius:69px;cursor:pointer;transition:all .2s ease-in-out,background-color .6s ease-in-out}.rounded-button:hover{background-color:var(--btn-hover-color);box-shadow:0 2px 6px var(--dd-base-300)}.rounded-button:active{background-color:var(--btn-active-color);transform:scale(.98)}.rounded-button:focus{outline:none}.rounded-button:disabled{background-color:var(--nx-base-200)!important;color:var(--nx-base-400)!important;cursor:not-allowed;box-shadow:none!important}.rounded-button:disabled:hover,.rounded-button:disabled:active,.rounded-button:disabled:focus{background-color:var(--nx-base-200)!important;transform:none!important}.rounded-button--blur-lift{position:relative;overflow:hidden;padding:0}.rounded-button--blur-lift:hover{box-shadow:none;background-color:var(--btn-bg-color)}.rounded-button--blur-lift:active{transform:none;background-color:var(--btn-bg-color)}.rounded-button--glide-over{display:grid;place-content:center;position:relative;overflow:hidden;padding:0;background:transparent;border:none;cursor:pointer}.rounded-button--glide-over:hover,.rounded-button--glide-over:active{background:transparent;box-shadow:none}.button-blur-lift__screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.button-blur-lift__container{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);z-index:1;width:100%;height:100%}.button-blur-lift__text{display:flex;position:relative}.button-blur-lift__letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__letter{display:inline-block;transform-origin:center center -.5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__letter[style*=\"--index: 0\"]{position:relative;filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.button-blur-lift__letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.button-blur-lift__hover-text{display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}.button-blur-lift__hover-letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__hover-letter{display:inline-block;transform-origin:center center .5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__hover-letter[style*=\"--index: 0\"]{position:relative;filter:blur(4px);opacity:0;transform:rotateX(180deg)}.button-blur-lift__hover-letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(90deg)}.button-blur-lift__hover-letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(0px);opacity:0;transform:rotateX(0)}.button-blur-lift__background{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--btn-bg-color);transition:background-color .3s ease;border-radius:inherit;z-index:0}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(4px);opacity:0;transform:rotateX(180deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(90deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 2\"]{filter:blur(0px);opacity:0;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 2\"]{filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.rounded-button--blur-lift:hover .button-blur-lift__background{background-color:var(--btn-hover-color)}.rounded-button--blur-lift:not(:has(.button-blur-lift__hover-text)):hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__hover-letter{transition-delay:0s}.button-blur-lift__letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__hover-letter{transition-delay:.03s}.button-blur-lift__letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__hover-letter{transition-delay:.06s}.button-blur-lift__letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__hover-letter{transition-delay:.09s}.button-blur-lift__letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__hover-letter{transition-delay:.12s}.button-blur-lift__letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__hover-letter{transition-delay:.15s}.button-blur-lift__letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__hover-letter{transition-delay:.18s}.button-blur-lift__letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__hover-letter{transition-delay:.21s}.button-blur-lift__letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__hover-letter{transition-delay:.24s}.button-blur-lift__letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__hover-letter{transition-delay:.27s}.button-blur-lift__letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__hover-letter{transition-delay:.3s}.button-blur-lift__letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__hover-letter{transition-delay:.33s}.button-blur-lift__letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__hover-letter{transition-delay:.36s}.button-blur-lift__letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__hover-letter{transition-delay:.39s}.button-blur-lift__letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__hover-letter{transition-delay:.42s}.button-blur-lift__letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__hover-letter{transition-delay:.45s}.button-blur-lift__letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__hover-letter{transition-delay:.48s}.button-blur-lift__letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__hover-letter{transition-delay:.51s}.button-blur-lift__letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__hover-letter{transition-delay:.54s}.button-blur-lift__letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__hover-letter{transition-delay:.57s}.button-blur-lift__letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__hover-letter{transition-delay:.6s}.button-blur-lift__letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__hover-letter{transition-delay:.63s}.button-blur-lift__letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__hover-letter{transition-delay:.66s}.button-blur-lift__letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__hover-letter{transition-delay:.69s}.button-blur-lift__letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__hover-letter{transition-delay:.72s}.button-blur-lift__letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__hover-letter{transition-delay:.75s}.button-blur-lift__letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__hover-letter{transition-delay:.78s}.button-blur-lift__letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__hover-letter{transition-delay:.81s}.button-blur-lift__letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__hover-letter{transition-delay:.84s}.button-blur-lift__letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__hover-letter{transition-delay:.87s}.button-blur-lift__letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__hover-letter{transition-delay:.9s}.rounded-button--blur-lift:active .button-blur-lift__background{background-color:var(--btn-active-color)}.rounded-button--glide-over{display:inline-grid;place-content:center;position:relative;overflow:hidden;border:none;background:transparent;cursor:pointer;border-radius:9999px;transition:all .4s ease;--opacity-ease: ease-in-out;--transform-ease: cubic-bezier(.19, 1, .22, 1);--elastic-ease: cubic-bezier(.68, -.55, .27, 1.55)}.rounded-button--glide-over:hover,.rounded-button--glide-over:focus{outline:none}.button-glide-over__container{display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);position:relative;z-index:1}.button-glide-over__text{position:relative;z-index:1;transition:transform .6s var(--transform-ease);transform:translate(-.375rem)}.button-glide-over__icon{width:1.25rem;height:1.25rem;flex-shrink:0;display:block;position:relative}.button-glide-over__icon svg{width:100%;height:100%;stroke:currentColor;fill:none}.button-glide-over__icon.is-last{margin-left:.5rem;transition:opacity .5s ease,transform .6s var(--elastic-ease);opacity:1}.button-glide-over__icon.is-first{position:absolute;left:0;top:50%;transform:translateY(-50%) translate(-120%);opacity:0;transition:opacity .6s ease,transform .9s var(--elastic-ease)}.button-glide-over__background{position:absolute;inset:0;border-radius:inherit;background:var(--btn-bg-color);transition:background-color .4s ease;z-index:0}.rounded-button--glide-over:hover .button-glide-over__text{transform:translate(2rem)}.rounded-button--glide-over:hover .button-glide-over__icon.is-first{opacity:1;transform:translateY(-50%) translate(100%)}.rounded-button--glide-over:hover .button-glide-over__icon.is-last{opacity:0;transform:translate(100%)}.button-glide-over__text{white-space:normal;word-break:break-word;text-align:center;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n"] });
214
221
  }
215
222
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonGlideOver, decorators: [{
216
223
  type: Component,
217
- args: [{ selector: 'duck-dev-button-glide-over', standalone: true, imports: [], template: "<button\n type=\"button\"\n class=\"rounded-button rounded-button--glide-over\"\n [style]=\"buttonStyle()\"\n>\n<span class=\"button-glide-over__container\">\n <span class=\"button-glide-over__icon is-first\">\n <svg\n class=\"button-glide-over__icon-item\"\n style=\"--index: 3\"\n viewBox=\"0 0 256 256\"\n >\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"24\"\n d=\"M40 128h176M144 56l72 72-72 72\"\n />\n </svg>\n </span>\n\n <span class=\"button-glide-over__text\">{{ textButton() }}</span>\n\n <span class=\"button-glide-over__icon is-last\">\n <svg\n class=\"button-glide-over__icon-item\"\n style=\"--index: 0\"\n viewBox=\"0 0 256 256\"\n >\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"20\"\n d=\"M40 128h176M144 56l72 72-72 72\"\n />\n </svg>\n </span>\n </span>\n\n<span class=\"button-glide-over__background\"></span>\n</button>\n", styles: ["@charset \"UTF-8\";:root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:root{--elastic-ease: linear( 0, .2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, .941 24.01%, .8912 25.91%, .8694 27.84%, .8698 29.21%, .8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, .9961 53.26%, .9839 57.54%, .9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, .9981 86.66%, 1 100% );--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--transform-ease: cubic-bezier(.32, .72, 0, 1);--opacity-ease: ease-out}.rounded-button{font-style:normal;font-family:Inter,sans-serif;font-size:18px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;min-width:64px;width:100%;text-wrap:nowrap;background-color:var(--btn-bg-color);color:var(--btn-text-color);padding:var(--btn-padding);border:1px solid var(--btn-border-color);border-radius:69px;cursor:pointer;transition:all .2s ease-in-out,background-color .6s ease-in-out}.rounded-button:hover{background-color:var(--btn-hover-color);box-shadow:0 2px 6px var(--dd-base-300)}.rounded-button:active{background-color:var(--btn-active-color);transform:scale(.98)}.rounded-button:focus{outline:none}.rounded-button:disabled{background-color:var(--nx-base-200)!important;color:var(--nx-base-400)!important;cursor:not-allowed;box-shadow:none!important}.rounded-button:disabled:hover,.rounded-button:disabled:active,.rounded-button:disabled:focus{background-color:var(--nx-base-200)!important;transform:none!important}.rounded-button--blur-lift{position:relative;overflow:hidden;padding:0}.rounded-button--blur-lift:hover{box-shadow:none;background-color:var(--btn-bg-color)}.rounded-button--blur-lift:active{transform:none;background-color:var(--btn-bg-color)}.rounded-button--glide-over{display:grid;place-content:center;position:relative;overflow:hidden;padding:0;background:transparent;border:none;cursor:pointer}.rounded-button--glide-over:hover,.rounded-button--glide-over:active{background:transparent;box-shadow:none}.button-blur-lift__screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.button-blur-lift__container{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);z-index:1;width:100%;height:100%}.button-blur-lift__text{display:flex;position:relative}.button-blur-lift__letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__letter{display:inline-block;transform-origin:center center -.5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__letter[style*=\"--index: 0\"]{position:relative;filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.button-blur-lift__letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.button-blur-lift__hover-text{display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}.button-blur-lift__hover-letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__hover-letter{display:inline-block;transform-origin:center center .5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__hover-letter[style*=\"--index: 0\"]{position:relative;filter:blur(4px);opacity:0;transform:rotateX(180deg)}.button-blur-lift__hover-letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(90deg)}.button-blur-lift__hover-letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(0px);opacity:0;transform:rotateX(0)}.button-blur-lift__background{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--btn-bg-color);transition:background-color .3s ease;border-radius:inherit;z-index:0}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(4px);opacity:0;transform:rotateX(180deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(90deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 2\"]{filter:blur(0px);opacity:0;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 2\"]{filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.rounded-button--blur-lift:hover .button-blur-lift__background{background-color:var(--btn-hover-color)}.rounded-button--blur-lift:not(:has(.button-blur-lift__hover-text)):hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__hover-letter{transition-delay:0s}.button-blur-lift__letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__hover-letter{transition-delay:.03s}.button-blur-lift__letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__hover-letter{transition-delay:.06s}.button-blur-lift__letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__hover-letter{transition-delay:.09s}.button-blur-lift__letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__hover-letter{transition-delay:.12s}.button-blur-lift__letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__hover-letter{transition-delay:.15s}.button-blur-lift__letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__hover-letter{transition-delay:.18s}.button-blur-lift__letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__hover-letter{transition-delay:.21s}.button-blur-lift__letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__hover-letter{transition-delay:.24s}.button-blur-lift__letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__hover-letter{transition-delay:.27s}.button-blur-lift__letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__hover-letter{transition-delay:.3s}.button-blur-lift__letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__hover-letter{transition-delay:.33s}.button-blur-lift__letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__hover-letter{transition-delay:.36s}.button-blur-lift__letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__hover-letter{transition-delay:.39s}.button-blur-lift__letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__hover-letter{transition-delay:.42s}.button-blur-lift__letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__hover-letter{transition-delay:.45s}.button-blur-lift__letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__hover-letter{transition-delay:.48s}.button-blur-lift__letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__hover-letter{transition-delay:.51s}.button-blur-lift__letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__hover-letter{transition-delay:.54s}.button-blur-lift__letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__hover-letter{transition-delay:.57s}.button-blur-lift__letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__hover-letter{transition-delay:.6s}.button-blur-lift__letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__hover-letter{transition-delay:.63s}.button-blur-lift__letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__hover-letter{transition-delay:.66s}.button-blur-lift__letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__hover-letter{transition-delay:.69s}.button-blur-lift__letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__hover-letter{transition-delay:.72s}.button-blur-lift__letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__hover-letter{transition-delay:.75s}.button-blur-lift__letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__hover-letter{transition-delay:.78s}.button-blur-lift__letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__hover-letter{transition-delay:.81s}.button-blur-lift__letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__hover-letter{transition-delay:.84s}.button-blur-lift__letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__hover-letter{transition-delay:.87s}.button-blur-lift__letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__hover-letter{transition-delay:.9s}.rounded-button--blur-lift:active .button-blur-lift__background{background-color:var(--btn-active-color)}.rounded-button--glide-over{display:inline-grid;place-content:center;position:relative;overflow:hidden;border:none;background:transparent;cursor:pointer;border-radius:9999px;transition:all .4s ease;--opacity-ease: ease-in-out;--transform-ease: cubic-bezier(.19, 1, .22, 1);--elastic-ease: cubic-bezier(.68, -.55, .27, 1.55)}.rounded-button--glide-over:hover,.rounded-button--glide-over:focus{outline:none}.button-glide-over__container{display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);position:relative;z-index:1}.button-glide-over__text{position:relative;z-index:1;transition:transform .6s var(--transform-ease);transform:translate(-.375rem)}.button-glide-over__icon{width:1.25rem;height:1.25rem;flex-shrink:0;display:block;position:relative}.button-glide-over__icon svg{width:100%;height:100%;stroke:currentColor;fill:none}.button-glide-over__icon.is-last{margin-left:.5rem;transition:opacity .5s ease,transform .6s var(--elastic-ease);opacity:1}.button-glide-over__icon.is-first{position:absolute;left:0;top:50%;transform:translateY(-50%) translate(-120%);opacity:0;transition:opacity .6s ease,transform .9s var(--elastic-ease)}.button-glide-over__background{position:absolute;inset:0;border-radius:inherit;background:var(--btn-bg-color);transition:background-color .4s ease;z-index:0}.rounded-button--glide-over:hover .button-glide-over__text{transform:translate(2rem)}.rounded-button--glide-over:hover .button-glide-over__icon.is-first{opacity:1;transform:translateY(-50%) translate(100%)}.rounded-button--glide-over:hover .button-glide-over__icon.is-last{opacity:0;transform:translate(100%)}.button-glide-over__text{white-space:normal;word-break:break-word;text-align:center;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n"] }]
224
+ args: [{ selector: 'duck-dev-button-glide-over', standalone: true, imports: [], template: "<button type=\"button\" class=\"rounded-button rounded-button--glide-over\" [style]=\"buttonStyle()\">\n <span class=\"button-glide-over__container\">\n <span class=\"button-glide-over__icon is-first\">\n <svg class=\"button-glide-over__icon-item\" style=\"--index: 3\" viewBox=\"0 0 256 256\">\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"24\"\n d=\"M40 128h176M144 56l72 72-72 72\"\n />\n </svg>\n </span>\n\n <span class=\"button-glide-over__text\">{{ textButton() }}</span>\n\n <span class=\"button-glide-over__icon is-last\">\n <svg class=\"button-glide-over__icon-item\" style=\"--index: 0\" viewBox=\"0 0 256 256\">\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"20\"\n d=\"M40 128h176M144 56l72 72-72 72\"\n />\n </svg>\n </span>\n </span>\n\n <span class=\"button-glide-over__background\"></span>\n</button>\n", styles: ["@charset \"UTF-8\";:root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:root{--elastic-ease: linear( 0, .2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, .941 24.01%, .8912 25.91%, .8694 27.84%, .8698 29.21%, .8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, .9961 53.26%, .9839 57.54%, .9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, .9981 86.66%, 1 100% );--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--transform-ease: cubic-bezier(.32, .72, 0, 1);--opacity-ease: ease-out}.rounded-button{font-style:normal;font-family:Inter,sans-serif;font-size:18px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;min-width:64px;width:100%;text-wrap:nowrap;background-color:var(--btn-bg-color);color:var(--btn-text-color);padding:var(--btn-padding);border:1px solid var(--btn-border-color);border-radius:69px;cursor:pointer;transition:all .2s ease-in-out,background-color .6s ease-in-out}.rounded-button:hover{background-color:var(--btn-hover-color);box-shadow:0 2px 6px var(--dd-base-300)}.rounded-button:active{background-color:var(--btn-active-color);transform:scale(.98)}.rounded-button:focus{outline:none}.rounded-button:disabled{background-color:var(--nx-base-200)!important;color:var(--nx-base-400)!important;cursor:not-allowed;box-shadow:none!important}.rounded-button:disabled:hover,.rounded-button:disabled:active,.rounded-button:disabled:focus{background-color:var(--nx-base-200)!important;transform:none!important}.rounded-button--blur-lift{position:relative;overflow:hidden;padding:0}.rounded-button--blur-lift:hover{box-shadow:none;background-color:var(--btn-bg-color)}.rounded-button--blur-lift:active{transform:none;background-color:var(--btn-bg-color)}.rounded-button--glide-over{display:grid;place-content:center;position:relative;overflow:hidden;padding:0;background:transparent;border:none;cursor:pointer}.rounded-button--glide-over:hover,.rounded-button--glide-over:active{background:transparent;box-shadow:none}.button-blur-lift__screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.button-blur-lift__container{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);z-index:1;width:100%;height:100%}.button-blur-lift__text{display:flex;position:relative}.button-blur-lift__letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__letter{display:inline-block;transform-origin:center center -.5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__letter[style*=\"--index: 0\"]{position:relative;filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.button-blur-lift__letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.button-blur-lift__hover-text{display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}.button-blur-lift__hover-letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__hover-letter{display:inline-block;transform-origin:center center .5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__hover-letter[style*=\"--index: 0\"]{position:relative;filter:blur(4px);opacity:0;transform:rotateX(180deg)}.button-blur-lift__hover-letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(90deg)}.button-blur-lift__hover-letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(0px);opacity:0;transform:rotateX(0)}.button-blur-lift__background{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--btn-bg-color);transition:background-color .3s ease;border-radius:inherit;z-index:0}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(4px);opacity:0;transform:rotateX(180deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(90deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 2\"]{filter:blur(0px);opacity:0;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 2\"]{filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.rounded-button--blur-lift:hover .button-blur-lift__background{background-color:var(--btn-hover-color)}.rounded-button--blur-lift:not(:has(.button-blur-lift__hover-text)):hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__hover-letter{transition-delay:0s}.button-blur-lift__letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__hover-letter{transition-delay:.03s}.button-blur-lift__letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__hover-letter{transition-delay:.06s}.button-blur-lift__letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__hover-letter{transition-delay:.09s}.button-blur-lift__letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__hover-letter{transition-delay:.12s}.button-blur-lift__letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__hover-letter{transition-delay:.15s}.button-blur-lift__letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__hover-letter{transition-delay:.18s}.button-blur-lift__letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__hover-letter{transition-delay:.21s}.button-blur-lift__letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__hover-letter{transition-delay:.24s}.button-blur-lift__letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__hover-letter{transition-delay:.27s}.button-blur-lift__letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__hover-letter{transition-delay:.3s}.button-blur-lift__letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__hover-letter{transition-delay:.33s}.button-blur-lift__letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__hover-letter{transition-delay:.36s}.button-blur-lift__letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__hover-letter{transition-delay:.39s}.button-blur-lift__letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__hover-letter{transition-delay:.42s}.button-blur-lift__letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__hover-letter{transition-delay:.45s}.button-blur-lift__letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__hover-letter{transition-delay:.48s}.button-blur-lift__letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__hover-letter{transition-delay:.51s}.button-blur-lift__letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__hover-letter{transition-delay:.54s}.button-blur-lift__letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__hover-letter{transition-delay:.57s}.button-blur-lift__letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__hover-letter{transition-delay:.6s}.button-blur-lift__letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__hover-letter{transition-delay:.63s}.button-blur-lift__letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__hover-letter{transition-delay:.66s}.button-blur-lift__letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__hover-letter{transition-delay:.69s}.button-blur-lift__letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__hover-letter{transition-delay:.72s}.button-blur-lift__letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__hover-letter{transition-delay:.75s}.button-blur-lift__letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__hover-letter{transition-delay:.78s}.button-blur-lift__letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__hover-letter{transition-delay:.81s}.button-blur-lift__letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__hover-letter{transition-delay:.84s}.button-blur-lift__letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__hover-letter{transition-delay:.87s}.button-blur-lift__letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__hover-letter{transition-delay:.9s}.rounded-button--blur-lift:active .button-blur-lift__background{background-color:var(--btn-active-color)}.rounded-button--glide-over{display:inline-grid;place-content:center;position:relative;overflow:hidden;border:none;background:transparent;cursor:pointer;border-radius:9999px;transition:all .4s ease;--opacity-ease: ease-in-out;--transform-ease: cubic-bezier(.19, 1, .22, 1);--elastic-ease: cubic-bezier(.68, -.55, .27, 1.55)}.rounded-button--glide-over:hover,.rounded-button--glide-over:focus{outline:none}.button-glide-over__container{display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);position:relative;z-index:1}.button-glide-over__text{position:relative;z-index:1;transition:transform .6s var(--transform-ease);transform:translate(-.375rem)}.button-glide-over__icon{width:1.25rem;height:1.25rem;flex-shrink:0;display:block;position:relative}.button-glide-over__icon svg{width:100%;height:100%;stroke:currentColor;fill:none}.button-glide-over__icon.is-last{margin-left:.5rem;transition:opacity .5s ease,transform .6s var(--elastic-ease);opacity:1}.button-glide-over__icon.is-first{position:absolute;left:0;top:50%;transform:translateY(-50%) translate(-120%);opacity:0;transition:opacity .6s ease,transform .9s var(--elastic-ease)}.button-glide-over__background{position:absolute;inset:0;border-radius:inherit;background:var(--btn-bg-color);transition:background-color .4s ease;z-index:0}.rounded-button--glide-over:hover .button-glide-over__text{transform:translate(2rem)}.rounded-button--glide-over:hover .button-glide-over__icon.is-first{opacity:1;transform:translateY(-50%) translate(100%)}.rounded-button--glide-over:hover .button-glide-over__icon.is-last{opacity:0;transform:translate(100%)}.button-glide-over__text{white-space:normal;word-break:break-word;text-align:center;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n"] }]
218
225
  }], propDecorators: { textButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "textButton", required: true }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }] } });
219
226
 
220
227
  class ButtonFlip {
@@ -222,28 +229,28 @@ class ButtonFlip {
222
229
  disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}) });
223
230
  arrowIndex = input(0, { ...(ngDevMode ? { debugName: "arrowIndex" } : {}) });
224
231
  direction = input(undefined, { ...(ngDevMode ? { debugName: "direction" } : {}) });
225
- colorButton = input(ButtonEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
232
+ colorButton = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
226
233
  buttonStyle = computed(() => {
227
234
  const color = this.colorButton();
228
235
  let textColor, bgColor;
229
236
  switch (color) {
230
- case ButtonEnumColor.Violet:
237
+ case AccentEnumColor.Violet:
231
238
  textColor = 'var(--dd-gray-0)';
232
239
  bgColor = 'var(--dd-base-secondary)';
233
240
  break;
234
- case ButtonEnumColor.Orange:
241
+ case AccentEnumColor.Orange:
235
242
  textColor = 'var(--dd-gray-0)';
236
243
  bgColor = 'var(--dd-base-accent-orange)';
237
244
  break;
238
- case ButtonEnumColor.White:
245
+ case AccentEnumColor.White:
239
246
  textColor = 'var(--dd-base-600)';
240
247
  bgColor = 'var(--dd-base-0)';
241
248
  break;
242
- case ButtonEnumColor.Gray:
249
+ case AccentEnumColor.Gray:
243
250
  textColor = 'var(--dd-base-600)';
244
251
  bgColor = 'var(--dd-base-100)';
245
252
  break;
246
- case ButtonEnumColor.Dark:
253
+ case AccentEnumColor.Dark:
247
254
  textColor = 'var(--dd-base-0)';
248
255
  bgColor = 'var(--dd-base-600)';
249
256
  break;
@@ -258,39 +265,39 @@ class ButtonFlip {
258
265
  };
259
266
  }, { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
260
267
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonFlip, deps: [], target: i0.ɵɵFactoryTarget.Component });
261
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonFlip, isStandalone: true, selector: "duck-dev-button-flip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, arrowIndex: { classPropertyName: "arrowIndex", publicName: "arrowIndex", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"button-color-flip w-inline-block\"\n [class.disabled]=\"disabled()\"\n [class.is-prev]=\"direction() === 'previous'\"\n [class.is-next]=\"direction() === 'next' || !direction()\"\n [attr.aria-disabled]=\"disabled()\"\n role=\"button\"\n tabindex=\"0\"\n>\n <span class=\"button-color-flip_inner\"\n [style.--btn-bg-color]=\"buttonStyle()['--btn-bg-color']\"\n [style.--btn-text-color]=\"buttonStyle()['--btn-text-color']\">\n <span [attr.data-text]=\"text()\" class=\"button-color-flip_back\"></span>\n <span class=\"button-color-flip_front\">\n <span class=\"button-color-flip_bg\"></span>\n <span class=\"button-color-flip_text\">{{ text() }}</span>\n </span>\n </span>\n\n <span class=\"button-color-flip_arrow-carrier\" aria-hidden=\"true\">\n <span [style.--index]=\"arrowIndex()\" class=\"button-color-flip_arrow\">{{ direction() === 'previous' ? '\u2190' : '\u2192' }}</span>\n </span>\n</div>\n", styles: [".button-color-flip{--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--smooth-ease: cubic-bezier(.32, .72, 0, 1);--color-ease: cubic-bezier(.216, .62, .356, 1);--fly-distance: 140%;position:relative;display:inline-block;max-width:100%;background-color:transparent;font-size:.875rem;line-height:1em;letter-spacing:-.02em;text-transform:uppercase;text-decoration:none;-webkit-user-select:none;user-select:none;cursor:pointer;transition:transform .45s var(--elastic-ease-out);-webkit-tap-highlight-color:transparent;overflow:visible}.button-color-flip:hover,.button-color-flip:active{transform:none}.button-color-flip_inner{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;border:1px solid currentColor;border-radius:3rem;overflow:hidden;transition:transform .5s var(--elastic-ease-out),opacity .4s var(--smooth-ease);background-color:var(--btn-bg-color, var(--dd-base-secondary));color:var(--btn-text-color, var(--dd-base-600))}.button-color-flip_back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(100%);transition:opacity .3s var(--smooth-ease),transform .4s var(--smooth-ease);pointer-events:none}.button-color-flip:hover .button-color-flip_back{opacity:1;transform:translateY(0);transition-delay:.05s}.button-color-flip_arrow{display:inline-block;font-size:1.2em;margin-left:.5rem;transform:translate(calc(var(--index) * -.2rem));transition:transform .3s var(--smooth-ease)}.button-color-flip:not(.disabled):hover .button-color-flip_arrow{transform:translate(.3rem);animation:arrowBounce .6s var(--elastic-ease-out)}@keyframes arrowBounce{0%,to{transform:translate(.3rem)}50%{transform:translate(.6rem)}}.button-color-flip_front{position:relative;display:flex;align-items:center;z-index:1;transition:opacity .3s var(--smooth-ease),transform .4s var(--smooth-ease)}.button-color-flip_bg{position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);transition:width .5s var(--color-ease),height .5s var(--color-ease);z-index:0}.button-color-flip:hover .button-color-flip_bg{width:300%;height:300%}.button-color-flip_text{position:relative;white-space:nowrap;z-index:1}@media(max-width:768px){.button-color-flip{font-size:.75rem}.button-color-flip_inner{padding:.6rem 1.2rem}}.button-color-flip.disabled{pointer-events:none;opacity:.6;cursor:not-allowed}.button-color-flip.disabled:hover,.button-color-flip.disabled:active{transform:none}.button-color-flip.is-next .button-color-flip_arrow{margin-left:.5rem;margin-right:0}.button-color-flip:hover .button-color-flip.is-next .button-color-flip_arrow{animation:arrowBounceRight .6s var(--elastic-ease-out)}.button-color-flip.is-prev .button-color-flip_arrow{margin-right:.5rem;margin-left:0;transform:translate(calc(var(--index) * .2rem))}.button-color-flip:hover .button-color-flip.is-prev .button-color-flip_arrow{transform:translate(-.3rem);animation:arrowBounceLeft .6s var(--elastic-ease-out)}@keyframes arrowBounceRight{0%,to{transform:translate(.3rem)}50%{transform:translate(.6rem)}}@keyframes arrowBounceLeft{0%,to{transform:translate(-.3rem)}50%{transform:translate(-.6rem)}}.button-color-flip_arrow-carrier{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2;opacity:0;transition:transform .55s var(--elastic-ease-out),opacity .35s var(--smooth-ease)}.button-color-flip.is-next .button-color-flip_arrow-carrier,.button-color-flip:not(.is-prev):not(.is-next) .button-color-flip_arrow-carrier{transform:translate(calc(-1 * var(--fly-distance)))}.button-color-flip.is-prev .button-color-flip_arrow-carrier{transform:translate(var(--fly-distance))}.button-color-flip:not(.disabled).is-next:hover .button-color-flip_inner,.button-color-flip:not(.disabled):not(.is-prev):not(.is-next):hover .button-color-flip_inner{transform:translate(var(--fly-distance));opacity:0}.button-color-flip:not(.disabled).is-prev:hover .button-color-flip_inner{transform:translate(calc(-1 * var(--fly-distance)));opacity:0}.button-color-flip:not(.disabled).is-next:hover .button-color-flip_arrow-carrier,.button-color-flip:not(.disabled):not(.is-prev):not(.is-next):hover .button-color-flip_arrow-carrier{transform:translate(0);opacity:1}.button-color-flip:not(.disabled).is-prev:hover .button-color-flip_arrow-carrier{transform:translate(0);opacity:1}\n"] });
268
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonFlip, isStandalone: true, selector: "duck-dev-button-flip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, arrowIndex: { classPropertyName: "arrowIndex", publicName: "arrowIndex", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"button-color-flip w-inline-block\"\n [class.disabled]=\"disabled()\"\n [class.is-prev]=\"direction() === 'previous'\"\n [class.is-next]=\"direction() === 'next' || !direction()\"\n [attr.aria-disabled]=\"disabled()\"\n role=\"button\"\n tabindex=\"0\"\n>\n <span\n class=\"button-color-flip_inner\"\n [style.--btn-bg-color]=\"buttonStyle()['--btn-bg-color']\"\n [style.--btn-text-color]=\"buttonStyle()['--btn-text-color']\"\n >\n <span [attr.data-text]=\"text()\" class=\"button-color-flip_back\"></span>\n <span class=\"button-color-flip_front\">\n <span class=\"button-color-flip_bg\"></span>\n <span class=\"button-color-flip_text\">{{ text() }}</span>\n </span>\n </span>\n\n <span class=\"button-color-flip_arrow-carrier\" aria-hidden=\"true\">\n <span [style.--index]=\"arrowIndex()\" class=\"button-color-flip_arrow\">{{\n direction() === 'previous' ? '\u2190' : '\u2192'\n }}</span>\n </span>\n</div>\n", styles: [".button-color-flip{--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--smooth-ease: cubic-bezier(.32, .72, 0, 1);--color-ease: cubic-bezier(.216, .62, .356, 1);--fly-distance: 140%;position:relative;display:inline-block;max-width:100%;background-color:transparent;font-size:.875rem;line-height:1em;letter-spacing:-.02em;text-transform:uppercase;text-decoration:none;-webkit-user-select:none;user-select:none;cursor:pointer;transition:transform .45s var(--elastic-ease-out);-webkit-tap-highlight-color:transparent;overflow:visible}.button-color-flip:hover,.button-color-flip:active{transform:none}.button-color-flip_inner{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;border:1px solid currentColor;border-radius:3rem;overflow:hidden;transition:transform .5s var(--elastic-ease-out),opacity .4s var(--smooth-ease);background-color:var(--btn-bg-color, var(--dd-base-secondary));color:var(--btn-text-color, var(--dd-base-600))}.button-color-flip_back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(100%);transition:opacity .3s var(--smooth-ease),transform .4s var(--smooth-ease);pointer-events:none}.button-color-flip:hover .button-color-flip_back{opacity:1;transform:translateY(0);transition-delay:.05s}.button-color-flip_arrow{display:inline-block;font-size:1.2em;margin-left:.5rem;transform:translate(calc(var(--index) * -.2rem));transition:transform .3s var(--smooth-ease)}.button-color-flip:not(.disabled):hover .button-color-flip_arrow{transform:translate(.3rem);animation:arrowBounce .6s var(--elastic-ease-out)}@keyframes arrowBounce{0%,to{transform:translate(.3rem)}50%{transform:translate(.6rem)}}.button-color-flip_front{position:relative;display:flex;align-items:center;z-index:1;transition:opacity .3s var(--smooth-ease),transform .4s var(--smooth-ease)}.button-color-flip_bg{position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);transition:width .5s var(--color-ease),height .5s var(--color-ease);z-index:0}.button-color-flip:hover .button-color-flip_bg{width:300%;height:300%}.button-color-flip_text{position:relative;white-space:nowrap;z-index:1}@media(max-width:768px){.button-color-flip{font-size:.75rem}.button-color-flip_inner{padding:.6rem 1.2rem}}.button-color-flip.disabled{pointer-events:none;opacity:.6;cursor:not-allowed}.button-color-flip.disabled:hover,.button-color-flip.disabled:active{transform:none}.button-color-flip.is-next .button-color-flip_arrow{margin-left:.5rem;margin-right:0}.button-color-flip:hover .button-color-flip.is-next .button-color-flip_arrow{animation:arrowBounceRight .6s var(--elastic-ease-out)}.button-color-flip.is-prev .button-color-flip_arrow{margin-right:.5rem;margin-left:0;transform:translate(calc(var(--index) * .2rem))}.button-color-flip:hover .button-color-flip.is-prev .button-color-flip_arrow{transform:translate(-.3rem);animation:arrowBounceLeft .6s var(--elastic-ease-out)}@keyframes arrowBounceRight{0%,to{transform:translate(.3rem)}50%{transform:translate(.6rem)}}@keyframes arrowBounceLeft{0%,to{transform:translate(-.3rem)}50%{transform:translate(-.6rem)}}.button-color-flip_arrow-carrier{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2;opacity:0;transition:transform .55s var(--elastic-ease-out),opacity .35s var(--smooth-ease)}.button-color-flip.is-next .button-color-flip_arrow-carrier,.button-color-flip:not(.is-prev):not(.is-next) .button-color-flip_arrow-carrier{transform:translate(calc(-1 * var(--fly-distance)))}.button-color-flip.is-prev .button-color-flip_arrow-carrier{transform:translate(var(--fly-distance))}.button-color-flip:not(.disabled).is-next:hover .button-color-flip_inner,.button-color-flip:not(.disabled):not(.is-prev):not(.is-next):hover .button-color-flip_inner{transform:translate(var(--fly-distance));opacity:0}.button-color-flip:not(.disabled).is-prev:hover .button-color-flip_inner{transform:translate(calc(-1 * var(--fly-distance)));opacity:0}.button-color-flip:not(.disabled).is-next:hover .button-color-flip_arrow-carrier,.button-color-flip:not(.disabled):not(.is-prev):not(.is-next):hover .button-color-flip_arrow-carrier{transform:translate(0);opacity:1}.button-color-flip:not(.disabled).is-prev:hover .button-color-flip_arrow-carrier{transform:translate(0);opacity:1}\n"] });
262
269
  }
263
270
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonFlip, decorators: [{
264
271
  type: Component,
265
- args: [{ selector: 'duck-dev-button-flip', standalone: true, template: "<div\n class=\"button-color-flip w-inline-block\"\n [class.disabled]=\"disabled()\"\n [class.is-prev]=\"direction() === 'previous'\"\n [class.is-next]=\"direction() === 'next' || !direction()\"\n [attr.aria-disabled]=\"disabled()\"\n role=\"button\"\n tabindex=\"0\"\n>\n <span class=\"button-color-flip_inner\"\n [style.--btn-bg-color]=\"buttonStyle()['--btn-bg-color']\"\n [style.--btn-text-color]=\"buttonStyle()['--btn-text-color']\">\n <span [attr.data-text]=\"text()\" class=\"button-color-flip_back\"></span>\n <span class=\"button-color-flip_front\">\n <span class=\"button-color-flip_bg\"></span>\n <span class=\"button-color-flip_text\">{{ text() }}</span>\n </span>\n </span>\n\n <span class=\"button-color-flip_arrow-carrier\" aria-hidden=\"true\">\n <span [style.--index]=\"arrowIndex()\" class=\"button-color-flip_arrow\">{{ direction() === 'previous' ? '\u2190' : '\u2192' }}</span>\n </span>\n</div>\n", styles: [".button-color-flip{--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--smooth-ease: cubic-bezier(.32, .72, 0, 1);--color-ease: cubic-bezier(.216, .62, .356, 1);--fly-distance: 140%;position:relative;display:inline-block;max-width:100%;background-color:transparent;font-size:.875rem;line-height:1em;letter-spacing:-.02em;text-transform:uppercase;text-decoration:none;-webkit-user-select:none;user-select:none;cursor:pointer;transition:transform .45s var(--elastic-ease-out);-webkit-tap-highlight-color:transparent;overflow:visible}.button-color-flip:hover,.button-color-flip:active{transform:none}.button-color-flip_inner{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;border:1px solid currentColor;border-radius:3rem;overflow:hidden;transition:transform .5s var(--elastic-ease-out),opacity .4s var(--smooth-ease);background-color:var(--btn-bg-color, var(--dd-base-secondary));color:var(--btn-text-color, var(--dd-base-600))}.button-color-flip_back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(100%);transition:opacity .3s var(--smooth-ease),transform .4s var(--smooth-ease);pointer-events:none}.button-color-flip:hover .button-color-flip_back{opacity:1;transform:translateY(0);transition-delay:.05s}.button-color-flip_arrow{display:inline-block;font-size:1.2em;margin-left:.5rem;transform:translate(calc(var(--index) * -.2rem));transition:transform .3s var(--smooth-ease)}.button-color-flip:not(.disabled):hover .button-color-flip_arrow{transform:translate(.3rem);animation:arrowBounce .6s var(--elastic-ease-out)}@keyframes arrowBounce{0%,to{transform:translate(.3rem)}50%{transform:translate(.6rem)}}.button-color-flip_front{position:relative;display:flex;align-items:center;z-index:1;transition:opacity .3s var(--smooth-ease),transform .4s var(--smooth-ease)}.button-color-flip_bg{position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);transition:width .5s var(--color-ease),height .5s var(--color-ease);z-index:0}.button-color-flip:hover .button-color-flip_bg{width:300%;height:300%}.button-color-flip_text{position:relative;white-space:nowrap;z-index:1}@media(max-width:768px){.button-color-flip{font-size:.75rem}.button-color-flip_inner{padding:.6rem 1.2rem}}.button-color-flip.disabled{pointer-events:none;opacity:.6;cursor:not-allowed}.button-color-flip.disabled:hover,.button-color-flip.disabled:active{transform:none}.button-color-flip.is-next .button-color-flip_arrow{margin-left:.5rem;margin-right:0}.button-color-flip:hover .button-color-flip.is-next .button-color-flip_arrow{animation:arrowBounceRight .6s var(--elastic-ease-out)}.button-color-flip.is-prev .button-color-flip_arrow{margin-right:.5rem;margin-left:0;transform:translate(calc(var(--index) * .2rem))}.button-color-flip:hover .button-color-flip.is-prev .button-color-flip_arrow{transform:translate(-.3rem);animation:arrowBounceLeft .6s var(--elastic-ease-out)}@keyframes arrowBounceRight{0%,to{transform:translate(.3rem)}50%{transform:translate(.6rem)}}@keyframes arrowBounceLeft{0%,to{transform:translate(-.3rem)}50%{transform:translate(-.6rem)}}.button-color-flip_arrow-carrier{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2;opacity:0;transition:transform .55s var(--elastic-ease-out),opacity .35s var(--smooth-ease)}.button-color-flip.is-next .button-color-flip_arrow-carrier,.button-color-flip:not(.is-prev):not(.is-next) .button-color-flip_arrow-carrier{transform:translate(calc(-1 * var(--fly-distance)))}.button-color-flip.is-prev .button-color-flip_arrow-carrier{transform:translate(var(--fly-distance))}.button-color-flip:not(.disabled).is-next:hover .button-color-flip_inner,.button-color-flip:not(.disabled):not(.is-prev):not(.is-next):hover .button-color-flip_inner{transform:translate(var(--fly-distance));opacity:0}.button-color-flip:not(.disabled).is-prev:hover .button-color-flip_inner{transform:translate(calc(-1 * var(--fly-distance)));opacity:0}.button-color-flip:not(.disabled).is-next:hover .button-color-flip_arrow-carrier,.button-color-flip:not(.disabled):not(.is-prev):not(.is-next):hover .button-color-flip_arrow-carrier{transform:translate(0);opacity:1}.button-color-flip:not(.disabled).is-prev:hover .button-color-flip_arrow-carrier{transform:translate(0);opacity:1}\n"] }]
272
+ args: [{ selector: 'duck-dev-button-flip', standalone: true, template: "<div\n class=\"button-color-flip w-inline-block\"\n [class.disabled]=\"disabled()\"\n [class.is-prev]=\"direction() === 'previous'\"\n [class.is-next]=\"direction() === 'next' || !direction()\"\n [attr.aria-disabled]=\"disabled()\"\n role=\"button\"\n tabindex=\"0\"\n>\n <span\n class=\"button-color-flip_inner\"\n [style.--btn-bg-color]=\"buttonStyle()['--btn-bg-color']\"\n [style.--btn-text-color]=\"buttonStyle()['--btn-text-color']\"\n >\n <span [attr.data-text]=\"text()\" class=\"button-color-flip_back\"></span>\n <span class=\"button-color-flip_front\">\n <span class=\"button-color-flip_bg\"></span>\n <span class=\"button-color-flip_text\">{{ text() }}</span>\n </span>\n </span>\n\n <span class=\"button-color-flip_arrow-carrier\" aria-hidden=\"true\">\n <span [style.--index]=\"arrowIndex()\" class=\"button-color-flip_arrow\">{{\n direction() === 'previous' ? '\u2190' : '\u2192'\n }}</span>\n </span>\n</div>\n", styles: [".button-color-flip{--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--smooth-ease: cubic-bezier(.32, .72, 0, 1);--color-ease: cubic-bezier(.216, .62, .356, 1);--fly-distance: 140%;position:relative;display:inline-block;max-width:100%;background-color:transparent;font-size:.875rem;line-height:1em;letter-spacing:-.02em;text-transform:uppercase;text-decoration:none;-webkit-user-select:none;user-select:none;cursor:pointer;transition:transform .45s var(--elastic-ease-out);-webkit-tap-highlight-color:transparent;overflow:visible}.button-color-flip:hover,.button-color-flip:active{transform:none}.button-color-flip_inner{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;border:1px solid currentColor;border-radius:3rem;overflow:hidden;transition:transform .5s var(--elastic-ease-out),opacity .4s var(--smooth-ease);background-color:var(--btn-bg-color, var(--dd-base-secondary));color:var(--btn-text-color, var(--dd-base-600))}.button-color-flip_back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(100%);transition:opacity .3s var(--smooth-ease),transform .4s var(--smooth-ease);pointer-events:none}.button-color-flip:hover .button-color-flip_back{opacity:1;transform:translateY(0);transition-delay:.05s}.button-color-flip_arrow{display:inline-block;font-size:1.2em;margin-left:.5rem;transform:translate(calc(var(--index) * -.2rem));transition:transform .3s var(--smooth-ease)}.button-color-flip:not(.disabled):hover .button-color-flip_arrow{transform:translate(.3rem);animation:arrowBounce .6s var(--elastic-ease-out)}@keyframes arrowBounce{0%,to{transform:translate(.3rem)}50%{transform:translate(.6rem)}}.button-color-flip_front{position:relative;display:flex;align-items:center;z-index:1;transition:opacity .3s var(--smooth-ease),transform .4s var(--smooth-ease)}.button-color-flip_bg{position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);transition:width .5s var(--color-ease),height .5s var(--color-ease);z-index:0}.button-color-flip:hover .button-color-flip_bg{width:300%;height:300%}.button-color-flip_text{position:relative;white-space:nowrap;z-index:1}@media(max-width:768px){.button-color-flip{font-size:.75rem}.button-color-flip_inner{padding:.6rem 1.2rem}}.button-color-flip.disabled{pointer-events:none;opacity:.6;cursor:not-allowed}.button-color-flip.disabled:hover,.button-color-flip.disabled:active{transform:none}.button-color-flip.is-next .button-color-flip_arrow{margin-left:.5rem;margin-right:0}.button-color-flip:hover .button-color-flip.is-next .button-color-flip_arrow{animation:arrowBounceRight .6s var(--elastic-ease-out)}.button-color-flip.is-prev .button-color-flip_arrow{margin-right:.5rem;margin-left:0;transform:translate(calc(var(--index) * .2rem))}.button-color-flip:hover .button-color-flip.is-prev .button-color-flip_arrow{transform:translate(-.3rem);animation:arrowBounceLeft .6s var(--elastic-ease-out)}@keyframes arrowBounceRight{0%,to{transform:translate(.3rem)}50%{transform:translate(.6rem)}}@keyframes arrowBounceLeft{0%,to{transform:translate(-.3rem)}50%{transform:translate(-.6rem)}}.button-color-flip_arrow-carrier{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2;opacity:0;transition:transform .55s var(--elastic-ease-out),opacity .35s var(--smooth-ease)}.button-color-flip.is-next .button-color-flip_arrow-carrier,.button-color-flip:not(.is-prev):not(.is-next) .button-color-flip_arrow-carrier{transform:translate(calc(-1 * var(--fly-distance)))}.button-color-flip.is-prev .button-color-flip_arrow-carrier{transform:translate(var(--fly-distance))}.button-color-flip:not(.disabled).is-next:hover .button-color-flip_inner,.button-color-flip:not(.disabled):not(.is-prev):not(.is-next):hover .button-color-flip_inner{transform:translate(var(--fly-distance));opacity:0}.button-color-flip:not(.disabled).is-prev:hover .button-color-flip_inner{transform:translate(calc(-1 * var(--fly-distance)));opacity:0}.button-color-flip:not(.disabled).is-next:hover .button-color-flip_arrow-carrier,.button-color-flip:not(.disabled):not(.is-prev):not(.is-next):hover .button-color-flip_arrow-carrier{transform:translate(0);opacity:1}.button-color-flip:not(.disabled).is-prev:hover .button-color-flip_arrow-carrier{transform:translate(0);opacity:1}\n"] }]
266
273
  }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], arrowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowIndex", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
267
274
 
268
275
  class ButtonCasper {
269
276
  isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : {}) });
270
277
  text = input('empty', { ...(ngDevMode ? { debugName: "text" } : {}) });
271
- colorButton = input(ButtonEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
278
+ colorButton = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
272
279
  buttonStyle = computed(() => {
273
280
  const color = this.colorButton();
274
281
  let baseColor;
275
282
  let accentColor;
276
283
  switch (color) {
277
- case ButtonEnumColor.Violet:
284
+ case AccentEnumColor.Violet:
278
285
  baseColor = 'var(--dd-base-secondary)';
279
286
  accentColor = 'var(--dd-gray-0)';
280
287
  break;
281
- case ButtonEnumColor.Orange:
288
+ case AccentEnumColor.Orange:
282
289
  baseColor = 'var(--dd-base-accent-orange)';
283
290
  accentColor = 'var(--dd-gray-0)';
284
291
  break;
285
- case ButtonEnumColor.White:
292
+ case AccentEnumColor.White:
286
293
  baseColor = 'var(--dd-base-600)';
287
294
  accentColor = 'var(--dd-base-0)';
288
295
  break;
289
- case ButtonEnumColor.Gray:
296
+ case AccentEnumColor.Gray:
290
297
  baseColor = 'var(--dd-base-300)';
291
298
  accentColor = 'var(--dd-base-600)';
292
299
  break;
293
- case ButtonEnumColor.Dark:
300
+ case AccentEnumColor.Dark:
294
301
  baseColor = 'var(--dd-base-600)';
295
302
  accentColor = 'var(--dd-base-0)';
296
303
  break;
@@ -305,40 +312,38 @@ class ButtonCasper {
305
312
  };
306
313
  }, { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
307
314
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonCasper, deps: [], target: i0.ɵɵFactoryTarget.Component });
308
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonCasper, isStandalone: true, selector: "duck-dev-button-casper", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n class=\"button-default is-casper\"\n [disabled]=\"isDisabled()\"\n [ngStyle]=\"buttonStyle()\"\n>\n <span class=\"content\">\n {{ text() }}\n </span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.button-default{position:relative;overflow:hidden;padding:.75rem 1.5rem;border-radius:.5rem;border:1px solid currentColor;background:transparent;cursor:pointer;color:var(--dd-base-600);font:inherit}.button-default.is-casper{--ease: cubic-bezier(.21, 1, .34, 1);--color-ease: cubic-bezier(.215, .61, .355, 1);--color-speed: .2s;--speed: .45s;--speed-fast: .3s;--speed-faster: .15s;transition:transform var(--speed-fast) var(--ease),color var(--color-speed) var(--color-ease)}@media(hover:hover)and (pointer:fine){.button-default.is-casper:before{content:\"\";position:absolute;inset:0;background-color:var(--color, currentColor);clip-path:inset(.75rem .75rem .75rem .75rem round .5rem);opacity:0;transition:clip-path var(--speed) var(--ease),opacity var(--color-speed) var(--color-ease);z-index:0}.button-default.is-casper:hover:before,.button-default.is-casper:focus-visible:before{clip-path:inset(0 0 0 0 round .25rem);opacity:1}.button-default.is-casper:hover,.button-default.is-casper:focus-visible{color:var(--dd-base-200)}}.content{position:relative;z-index:1}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
315
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonCasper, isStandalone: true, selector: "duck-dev-button-casper", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"button-default is-casper\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"content\">\n {{ text() }}\n </span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.button-default{position:relative;overflow:hidden;padding:.75rem 1.5rem;border-radius:.5rem;border:1px solid currentColor;background:transparent;cursor:pointer;color:var(--dd-base-600);font:inherit}.button-default.is-casper{--ease: cubic-bezier(.21, 1, .34, 1);--color-ease: cubic-bezier(.215, .61, .355, 1);--color-speed: .2s;--speed: .45s;--speed-fast: .3s;--speed-faster: .15s;transition:transform var(--speed-fast) var(--ease),color var(--color-speed) var(--color-ease)}@media(hover:hover)and (pointer:fine){.button-default.is-casper:before{content:\"\";position:absolute;inset:0;background-color:var(--color, currentColor);clip-path:inset(.75rem .75rem .75rem .75rem round .5rem);opacity:0;transition:clip-path var(--speed) var(--ease),opacity var(--color-speed) var(--color-ease);z-index:0}.button-default.is-casper:hover:before,.button-default.is-casper:focus-visible:before{clip-path:inset(0 0 0 0 round .25rem);opacity:1}.button-default.is-casper:hover,.button-default.is-casper:focus-visible{color:var(--dd-base-200)}}.content{position:relative;z-index:1}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
309
316
  }
310
317
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonCasper, decorators: [{
311
318
  type: Component,
312
- args: [{ selector: 'duck-dev-button-casper', standalone: true, imports: [
313
- NgStyle
314
- ], template: "<button\n class=\"button-default is-casper\"\n [disabled]=\"isDisabled()\"\n [ngStyle]=\"buttonStyle()\"\n>\n <span class=\"content\">\n {{ text() }}\n </span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.button-default{position:relative;overflow:hidden;padding:.75rem 1.5rem;border-radius:.5rem;border:1px solid currentColor;background:transparent;cursor:pointer;color:var(--dd-base-600);font:inherit}.button-default.is-casper{--ease: cubic-bezier(.21, 1, .34, 1);--color-ease: cubic-bezier(.215, .61, .355, 1);--color-speed: .2s;--speed: .45s;--speed-fast: .3s;--speed-faster: .15s;transition:transform var(--speed-fast) var(--ease),color var(--color-speed) var(--color-ease)}@media(hover:hover)and (pointer:fine){.button-default.is-casper:before{content:\"\";position:absolute;inset:0;background-color:var(--color, currentColor);clip-path:inset(.75rem .75rem .75rem .75rem round .5rem);opacity:0;transition:clip-path var(--speed) var(--ease),opacity var(--color-speed) var(--color-ease);z-index:0}.button-default.is-casper:hover:before,.button-default.is-casper:focus-visible:before{clip-path:inset(0 0 0 0 round .25rem);opacity:1}.button-default.is-casper:hover,.button-default.is-casper:focus-visible{color:var(--dd-base-200)}}.content{position:relative;z-index:1}\n"] }]
319
+ args: [{ selector: 'duck-dev-button-casper', standalone: true, imports: [NgStyle], template: "<button class=\"button-default is-casper\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"content\">\n {{ text() }}\n </span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.button-default{position:relative;overflow:hidden;padding:.75rem 1.5rem;border-radius:.5rem;border:1px solid currentColor;background:transparent;cursor:pointer;color:var(--dd-base-600);font:inherit}.button-default.is-casper{--ease: cubic-bezier(.21, 1, .34, 1);--color-ease: cubic-bezier(.215, .61, .355, 1);--color-speed: .2s;--speed: .45s;--speed-fast: .3s;--speed-faster: .15s;transition:transform var(--speed-fast) var(--ease),color var(--color-speed) var(--color-ease)}@media(hover:hover)and (pointer:fine){.button-default.is-casper:before{content:\"\";position:absolute;inset:0;background-color:var(--color, currentColor);clip-path:inset(.75rem .75rem .75rem .75rem round .5rem);opacity:0;transition:clip-path var(--speed) var(--ease),opacity var(--color-speed) var(--color-ease);z-index:0}.button-default.is-casper:hover:before,.button-default.is-casper:focus-visible:before{clip-path:inset(0 0 0 0 round .25rem);opacity:1}.button-default.is-casper:hover,.button-default.is-casper:focus-visible{color:var(--dd-base-200)}}.content{position:relative;z-index:1}\n"] }]
315
320
  }], propDecorators: { isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
316
321
 
317
322
  class LoaderLoadingBubble {
318
323
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderLoadingBubble, deps: [], target: i0.ɵɵFactoryTarget.Component });
319
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderLoadingBubble, isStandalone: true, selector: "duck-dev-loader-loading-bubble", ngImport: i0, template: "<div class=\"container\">\n <div class=\"main\">\n <span class=\"loader\">Load&nbsp;ng</span>\n </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.loader{color:var(--btn-text-color);position:relative;display:inline-block;margin-top:40px;font-family:Arial,Helvetica,sans-serif;font-size:48px;letter-spacing:4px;box-sizing:border-box}.loader:before{content:\"\";position:absolute;right:70.55px;bottom:10px;height:28px;width:4.45px;background:currentColor;box-sizing:border-box;animation:animloader1 1s linear infinite alternate}.loader:after{content:\"\";width:10px;height:10px;position:absolute;left:125px;top:2px;border-radius:50%;background:var(--dd-accent-orange);box-sizing:border-box;animation:animloader 1s linear infinite alternate}@keyframes animloader{0%{transform:translate(0) scaleX(1)}14%{transform:translate(-12px,-16px) scaleX(1.05)}28%{transform:translate(-27px,-28px) scaleX(1.07)}42%{transform:translate(-46px,-35px) scaleX(1.1)}57%{transform:translate(-70px,-37px) scaleX(1.1)}71%{transform:translate(-94px,-32px) scaleX(1.07)}85%{transform:translate(-111px,-22px) scaleX(1.05)}to{transform:translate(-125px,-9px) scaleX(1)}}@keyframes animloader1{0%{box-shadow:0 -6px,-122.9px -8px}25%,75%{box-shadow:0 0,-122.9px -8px}to{box-shadow:0 0,-122.9px -16px}}\n"] });
324
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderLoadingBubble, isStandalone: true, selector: "duck-dev-loader-loading-bubble", ngImport: i0, template: "<div class=\"container\">\n <div class=\"main\">\n <span class=\"loader\">Load&nbsp;ng</span>\n </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.loader{color:var(--btn-text-color);position:relative;display:inline-block;margin-top:40px;font-family:Arial,Helvetica,sans-serif;font-size:48px;letter-spacing:4px;box-sizing:border-box}.loader:before{content:\"\";position:absolute;right:70.55px;bottom:10px;height:28px;width:4.45px;background:currentColor;box-sizing:border-box;animation:animloader1 1s linear infinite alternate}.loader:after{content:\"\";width:10px;height:10px;position:absolute;left:125px;top:2px;border-radius:50%;background:var(--dd-accent-orange);box-sizing:border-box;animation:animloader 1s linear infinite alternate}@keyframes animloader{0%{transform:translate(0) scaleX(1)}14%{transform:translate(-12px,-16px) scaleX(1.05)}28%{transform:translate(-27px,-28px) scaleX(1.07)}42%{transform:translate(-46px,-35px) scaleX(1.1)}57%{transform:translate(-70px,-37px) scaleX(1.1)}71%{transform:translate(-94px,-32px) scaleX(1.07)}85%{transform:translate(-111px,-22px) scaleX(1.05)}to{transform:translate(-125px,-9px) scaleX(1)}}@keyframes animloader1{0%{box-shadow:0 -6px,-122.9px -8px}25%,75%{box-shadow:0 0,-122.9px -8px}to{box-shadow:0 0,-122.9px -16px}}\n"] });
320
325
  }
321
326
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderLoadingBubble, decorators: [{
322
327
  type: Component,
323
- args: [{ selector: 'duck-dev-loader-loading-bubble', imports: [], template: "<div class=\"container\">\n <div class=\"main\">\n <span class=\"loader\">Load&nbsp;ng</span>\n </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.loader{color:var(--btn-text-color);position:relative;display:inline-block;margin-top:40px;font-family:Arial,Helvetica,sans-serif;font-size:48px;letter-spacing:4px;box-sizing:border-box}.loader:before{content:\"\";position:absolute;right:70.55px;bottom:10px;height:28px;width:4.45px;background:currentColor;box-sizing:border-box;animation:animloader1 1s linear infinite alternate}.loader:after{content:\"\";width:10px;height:10px;position:absolute;left:125px;top:2px;border-radius:50%;background:var(--dd-accent-orange);box-sizing:border-box;animation:animloader 1s linear infinite alternate}@keyframes animloader{0%{transform:translate(0) scaleX(1)}14%{transform:translate(-12px,-16px) scaleX(1.05)}28%{transform:translate(-27px,-28px) scaleX(1.07)}42%{transform:translate(-46px,-35px) scaleX(1.1)}57%{transform:translate(-70px,-37px) scaleX(1.1)}71%{transform:translate(-94px,-32px) scaleX(1.07)}85%{transform:translate(-111px,-22px) scaleX(1.05)}to{transform:translate(-125px,-9px) scaleX(1)}}@keyframes animloader1{0%{box-shadow:0 -6px,-122.9px -8px}25%,75%{box-shadow:0 0,-122.9px -8px}to{box-shadow:0 0,-122.9px -16px}}\n"] }]
328
+ args: [{ selector: 'duck-dev-loader-loading-bubble', imports: [], template: "<div class=\"container\">\n <div class=\"main\">\n <span class=\"loader\">Load&nbsp;ng</span>\n </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.loader{color:var(--btn-text-color);position:relative;display:inline-block;margin-top:40px;font-family:Arial,Helvetica,sans-serif;font-size:48px;letter-spacing:4px;box-sizing:border-box}.loader:before{content:\"\";position:absolute;right:70.55px;bottom:10px;height:28px;width:4.45px;background:currentColor;box-sizing:border-box;animation:animloader1 1s linear infinite alternate}.loader:after{content:\"\";width:10px;height:10px;position:absolute;left:125px;top:2px;border-radius:50%;background:var(--dd-accent-orange);box-sizing:border-box;animation:animloader 1s linear infinite alternate}@keyframes animloader{0%{transform:translate(0) scaleX(1)}14%{transform:translate(-12px,-16px) scaleX(1.05)}28%{transform:translate(-27px,-28px) scaleX(1.07)}42%{transform:translate(-46px,-35px) scaleX(1.1)}57%{transform:translate(-70px,-37px) scaleX(1.1)}71%{transform:translate(-94px,-32px) scaleX(1.07)}85%{transform:translate(-111px,-22px) scaleX(1.05)}to{transform:translate(-125px,-9px) scaleX(1)}}@keyframes animloader1{0%{box-shadow:0 -6px,-122.9px -8px}25%,75%{box-shadow:0 0,-122.9px -8px}to{box-shadow:0 0,-122.9px -16px}}\n"] }]
324
329
  }] });
325
330
 
326
331
  class LoaderClassic {
327
332
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
328
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderClassic, isStandalone: true, selector: "duck-dev-loader-classic", ngImport: i0, template: "<span class=\"loader\"></span>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.loader{width:48px;height:48px;border-radius:50%;display:inline-block;border-top:3px solid var(--dd-base-600);border-right:3px solid transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] });
333
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderClassic, isStandalone: true, selector: "duck-dev-loader-classic", ngImport: i0, template: "<span class=\"loader\"></span>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.loader{width:48px;height:48px;border-radius:50%;display:inline-block;border-top:3px solid var(--dd-base-600);border-right:3px solid transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] });
329
334
  }
330
335
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderClassic, decorators: [{
331
336
  type: Component,
332
- args: [{ selector: 'duck-dev-loader-classic', imports: [], template: "<span class=\"loader\"></span>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.loader{width:48px;height:48px;border-radius:50%;display:inline-block;border-top:3px solid var(--dd-base-600);border-right:3px solid transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
337
+ args: [{ selector: 'duck-dev-loader-classic', imports: [], template: "<span class=\"loader\"></span>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.loader{width:48px;height:48px;border-radius:50%;display:inline-block;border-top:3px solid var(--dd-base-600);border-right:3px solid transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
333
338
  }] });
334
339
 
335
340
  class LoaderThreeDots {
336
341
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderThreeDots, deps: [], target: i0.ɵɵFactoryTarget.Component });
337
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderThreeDots, isStandalone: true, selector: "duck-dev-loader-three-dots", ngImport: i0, template: "<span class=\"loader\"></span>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.loader,.loader:before,.loader:after{border-radius:50%;width:2.5em;height:2.5em;animation-fill-mode:both;animation:bblFadInOut 1.8s infinite ease-in-out}.loader{color:var(--dd-base-600);font-size:7px;position:relative;text-indent:-9999em;transform:translateZ(0);animation-delay:-.16s}.loader:before,.loader:after{content:\"\";position:absolute;top:0}.loader:before{left:-3.5em;animation-delay:-.32s}.loader:after{left:3.5em}@keyframes bblFadInOut{0%,80%,to{box-shadow:0 2.5em 0 -1.3em}40%{box-shadow:0 2.5em}}\n"] });
342
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderThreeDots, isStandalone: true, selector: "duck-dev-loader-three-dots", ngImport: i0, template: "<span class=\"loader\"></span>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.loader,.loader:before,.loader:after{border-radius:50%;width:2.5em;height:2.5em;animation-fill-mode:both;animation:bblFadInOut 1.8s infinite ease-in-out}.loader{color:var(--dd-base-600);font-size:7px;position:relative;text-indent:-9999em;transform:translateZ(0);animation-delay:-.16s}.loader:before,.loader:after{content:\"\";position:absolute;top:0}.loader:before{left:-3.5em;animation-delay:-.32s}.loader:after{left:3.5em}@keyframes bblFadInOut{0%,80%,to{box-shadow:0 2.5em 0 -1.3em}40%{box-shadow:0 2.5em}}\n"] });
338
343
  }
339
344
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderThreeDots, decorators: [{
340
345
  type: Component,
341
- args: [{ selector: 'duck-dev-loader-three-dots', imports: [], template: "<span class=\"loader\"></span>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.loader,.loader:before,.loader:after{border-radius:50%;width:2.5em;height:2.5em;animation-fill-mode:both;animation:bblFadInOut 1.8s infinite ease-in-out}.loader{color:var(--dd-base-600);font-size:7px;position:relative;text-indent:-9999em;transform:translateZ(0);animation-delay:-.16s}.loader:before,.loader:after{content:\"\";position:absolute;top:0}.loader:before{left:-3.5em;animation-delay:-.32s}.loader:after{left:3.5em}@keyframes bblFadInOut{0%,80%,to{box-shadow:0 2.5em 0 -1.3em}40%{box-shadow:0 2.5em}}\n"] }]
346
+ args: [{ selector: 'duck-dev-loader-three-dots', imports: [], template: "<span class=\"loader\"></span>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.loader,.loader:before,.loader:after{border-radius:50%;width:2.5em;height:2.5em;animation-fill-mode:both;animation:bblFadInOut 1.8s infinite ease-in-out}.loader{color:var(--dd-base-600);font-size:7px;position:relative;text-indent:-9999em;transform:translateZ(0);animation-delay:-.16s}.loader:before,.loader:after{content:\"\";position:absolute;top:0}.loader:before{left:-3.5em;animation-delay:-.32s}.loader:after{left:3.5em}@keyframes bblFadInOut{0%,80%,to{box-shadow:0 2.5em 0 -1.3em}40%{box-shadow:0 2.5em}}\n"] }]
342
347
  }] });
343
348
 
344
349
  class DuckDevTab {
@@ -359,11 +364,11 @@ class DuckDevTab {
359
364
  return this.activeTabIndex() === index;
360
365
  }
361
366
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
362
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTab, isStandalone: true, selector: "duck-dev-tab", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, ngImport: i0, template: "<div class=\"duck-dev-tab\">\n <div class=\"tab-header\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n class=\"tab-button\"\n [class.active]=\"isActive(i)\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n {{ tab.label }}\n </button>\n }\n <div\n class=\"tab-indicator\"\n [style.transform]=\"'translateX(' + (activeTabIndex() * 100) + '%)'\"\n [style.width]=\"'calc(100% / ' + tabs().length + ')'\"\n ></div>\n </div>\n\n <div class=\"tab-content-wrapper\">\n <div\n class=\"tab-content\"\n [class.slide-left]=\"animationDirection() === 'left'\"\n [class.slide-right]=\"animationDirection() === 'right'\"\n [attr.data-active-index]=\"activeTabIndex()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-tab{width:100%;display:flex;flex-direction:column}.tab-header{position:relative;display:flex;border-bottom:2px solid var(--dd-base-300);background:transparent}.tab-button{flex:1;padding:12px 24px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:color .3s ease;position:relative;z-index:1;outline:none}.tab-button:hover{color:var(--dd-base-500)}.tab-button.active{color:var(--dd-base-accent-blue)}.tab-indicator{position:absolute;bottom:-2px;left:0;height:2px;background:var(--dd-base-accent-blue);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;overflow:hidden;padding:20px}.tab-content{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-right{animation-name:slideInRight}.tab-content.slide-left{animation-name:slideInLeft}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
367
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTab, isStandalone: true, selector: "duck-dev-tab", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, ngImport: i0, template: "<div class=\"duck-dev-tab\">\n <div class=\"tab-header\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button class=\"tab-button\" [class.active]=\"isActive(i)\" (click)=\"selectTab(i)\" type=\"button\">\n {{ tab.label }}\n </button>\n }\n <div\n class=\"tab-indicator\"\n [style.transform]=\"'translateX(' + activeTabIndex() * 100 + '%)'\"\n [style.width]=\"'calc(100% / ' + tabs().length + ')'\"\n ></div>\n </div>\n\n <div class=\"tab-content-wrapper\">\n <div\n class=\"tab-content\"\n [class.slide-left]=\"animationDirection() === 'left'\"\n [class.slide-right]=\"animationDirection() === 'right'\"\n [attr.data-active-index]=\"activeTabIndex()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-tab{width:100%;display:flex;flex-direction:column}.tab-header{position:relative;display:flex;border-bottom:2px solid var(--dd-base-300);background:transparent}.tab-button{flex:1;padding:12px 24px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:color .3s ease;position:relative;z-index:1;outline:none}.tab-button:hover{color:var(--dd-base-500)}.tab-button.active{color:var(--dd-base-accent-blue)}.tab-indicator{position:absolute;bottom:-2px;left:0;height:2px;background:var(--dd-base-accent-blue);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;overflow:hidden;padding:20px}.tab-content{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-right{animation-name:slideInRight}.tab-content.slide-left{animation-name:slideInLeft}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
363
368
  }
364
369
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTab, decorators: [{
365
370
  type: Component,
366
- args: [{ selector: 'duck-dev-tab', standalone: true, imports: [CommonModule], template: "<div class=\"duck-dev-tab\">\n <div class=\"tab-header\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n class=\"tab-button\"\n [class.active]=\"isActive(i)\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n {{ tab.label }}\n </button>\n }\n <div\n class=\"tab-indicator\"\n [style.transform]=\"'translateX(' + (activeTabIndex() * 100) + '%)'\"\n [style.width]=\"'calc(100% / ' + tabs().length + ')'\"\n ></div>\n </div>\n\n <div class=\"tab-content-wrapper\">\n <div\n class=\"tab-content\"\n [class.slide-left]=\"animationDirection() === 'left'\"\n [class.slide-right]=\"animationDirection() === 'right'\"\n [attr.data-active-index]=\"activeTabIndex()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-tab{width:100%;display:flex;flex-direction:column}.tab-header{position:relative;display:flex;border-bottom:2px solid var(--dd-base-300);background:transparent}.tab-button{flex:1;padding:12px 24px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:color .3s ease;position:relative;z-index:1;outline:none}.tab-button:hover{color:var(--dd-base-500)}.tab-button.active{color:var(--dd-base-accent-blue)}.tab-indicator{position:absolute;bottom:-2px;left:0;height:2px;background:var(--dd-base-accent-blue);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;overflow:hidden;padding:20px}.tab-content{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-right{animation-name:slideInRight}.tab-content.slide-left{animation-name:slideInLeft}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}\n"] }]
371
+ args: [{ selector: 'duck-dev-tab', standalone: true, imports: [CommonModule], template: "<div class=\"duck-dev-tab\">\n <div class=\"tab-header\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button class=\"tab-button\" [class.active]=\"isActive(i)\" (click)=\"selectTab(i)\" type=\"button\">\n {{ tab.label }}\n </button>\n }\n <div\n class=\"tab-indicator\"\n [style.transform]=\"'translateX(' + activeTabIndex() * 100 + '%)'\"\n [style.width]=\"'calc(100% / ' + tabs().length + ')'\"\n ></div>\n </div>\n\n <div class=\"tab-content-wrapper\">\n <div\n class=\"tab-content\"\n [class.slide-left]=\"animationDirection() === 'left'\"\n [class.slide-right]=\"animationDirection() === 'right'\"\n [attr.data-active-index]=\"activeTabIndex()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-tab{width:100%;display:flex;flex-direction:column}.tab-header{position:relative;display:flex;border-bottom:2px solid var(--dd-base-300);background:transparent}.tab-button{flex:1;padding:12px 24px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:color .3s ease;position:relative;z-index:1;outline:none}.tab-button:hover{color:var(--dd-base-500)}.tab-button.active{color:var(--dd-base-accent-blue)}.tab-indicator{position:absolute;bottom:-2px;left:0;height:2px;background:var(--dd-base-accent-blue);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;overflow:hidden;padding:20px}.tab-content{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-right{animation-name:slideInRight}.tab-content.slide-left{animation-name:slideInLeft}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}\n"] }]
367
372
  }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
368
373
 
369
374
  class DuckDevTabVertical {
@@ -406,56 +411,43 @@ class DuckDevTabVertical {
406
411
  return this.activeTabIndex() === index;
407
412
  }
408
413
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabVertical, deps: [], target: i0.ɵɵFactoryTarget.Component });
409
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTabVertical, isStandalone: true, selector: "duck-dev-tab-vertical", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"duck-dev-tab-vertical\">\n <div class=\"tab-sidebar\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n #tabButton\n class=\"tab-button\"\n [class.active]=\"isActive(i)\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n @if (tab.icon) {\n <span class=\"tab-icon\" [innerHTML]=\"tab.icon\"></span>\n }\n <span class=\"tab-label\">{{ tab.label }}</span>\n </button>\n }\n <div\n class=\"tab-indicator\"\n [style.top.px]=\"indicatorTop()\"\n [style.height.px]=\"indicatorHeight()\"\n ></div>\n </div>\n\n <div class=\"tab-content-wrapper\">\n <div\n class=\"tab-content\"\n [class.slide-up]=\"animationDirection() === 'up'\"\n [class.slide-down]=\"animationDirection() === 'down'\"\n [attr.data-active-index]=\"activeTabIndex()\"\n [attr.data-animation-key]=\"animationKey()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-tab-vertical{width:100%;height:100%;display:flex;flex-direction:row;overflow:hidden}.tab-sidebar{position:relative;display:flex;flex-direction:column;min-width:200px;height:100%;border-right:2px solid var(--dd-base-300);background:transparent;flex-shrink:0}.tab-button{display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:all .3s ease;position:relative;z-index:1;outline:none;text-align:left;width:100%}.tab-button:hover{color:var(--dd-base-500);background:var(--dd-base-100)}.tab-button.active{color:var(--dd-base-accent-blue);background:var(--dd-base-100)}.tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:transform .3s ease}.tab-button:hover .tab-icon{transform:scale(1.1)}.tab-button.active .tab-icon{transform:scale(1.15)}.tab-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.tab-label{flex:1}.tab-indicator{position:absolute;right:-2px;width:2px;background:var(--dd-base-accent-blue);transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;flex:1;overflow:auto;padding:20px;min-width:0}.tab-content{width:100%;height:100%}.tab-content.slide-down,.tab-content.slide-up{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-down{animation-name:slideInDown}.tab-content.slide-up{animation-name:slideInUp}@keyframes slideInDown{0%{transform:translateY(100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}@keyframes slideInUp{0%{transform:translateY(-100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
414
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTabVertical, isStandalone: true, selector: "duck-dev-tab-vertical", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"duck-dev-tab-vertical\">\n <div class=\"tab-sidebar\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n #tabButton\n class=\"tab-button\"\n [class.active]=\"isActive(i)\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n @if (tab.icon) {\n <span class=\"tab-icon\" [innerHTML]=\"tab.icon\"></span>\n }\n <span class=\"tab-label\">{{ tab.label }}</span>\n </button>\n }\n <div\n class=\"tab-indicator\"\n [style.top.px]=\"indicatorTop()\"\n [style.height.px]=\"indicatorHeight()\"\n ></div>\n </div>\n\n <div class=\"tab-content-wrapper\">\n <div\n class=\"tab-content\"\n [class.slide-up]=\"animationDirection() === 'up'\"\n [class.slide-down]=\"animationDirection() === 'down'\"\n [attr.data-active-index]=\"activeTabIndex()\"\n [attr.data-animation-key]=\"animationKey()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-tab-vertical{width:100%;height:100%;display:flex;flex-direction:row;overflow:hidden}.tab-sidebar{position:relative;display:flex;flex-direction:column;min-width:200px;height:100%;border-right:2px solid var(--dd-base-300);background:transparent;flex-shrink:0}.tab-button{display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:all .3s ease;position:relative;z-index:1;outline:none;text-align:left;width:100%}.tab-button:hover{color:var(--dd-base-500);background:var(--dd-base-100)}.tab-button.active{color:var(--dd-base-accent-blue);background:var(--dd-base-100)}.tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:transform .3s ease}.tab-button:hover .tab-icon{transform:scale(1.1)}.tab-button.active .tab-icon{transform:scale(1.15)}.tab-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.tab-label{flex:1}.tab-indicator{position:absolute;right:-2px;width:2px;background:var(--dd-base-accent-blue);transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;flex:1;overflow:auto;padding:20px;min-width:0}.tab-content{width:100%;height:100%}.tab-content.slide-down,.tab-content.slide-up{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-down{animation-name:slideInDown}.tab-content.slide-up{animation-name:slideInUp}@keyframes slideInDown{0%{transform:translateY(100%);opacity:0;filter:blur(4px)}50%{filter:blur(2px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}@keyframes slideInUp{0%{transform:translateY(-100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
410
415
  }
411
416
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabVertical, decorators: [{
412
417
  type: Component,
413
- args: [{ selector: 'duck-dev-tab-vertical', standalone: true, imports: [CommonModule], template: "<div class=\"duck-dev-tab-vertical\">\n <div class=\"tab-sidebar\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n #tabButton\n class=\"tab-button\"\n [class.active]=\"isActive(i)\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n @if (tab.icon) {\n <span class=\"tab-icon\" [innerHTML]=\"tab.icon\"></span>\n }\n <span class=\"tab-label\">{{ tab.label }}</span>\n </button>\n }\n <div\n class=\"tab-indicator\"\n [style.top.px]=\"indicatorTop()\"\n [style.height.px]=\"indicatorHeight()\"\n ></div>\n </div>\n\n <div class=\"tab-content-wrapper\">\n <div\n class=\"tab-content\"\n [class.slide-up]=\"animationDirection() === 'up'\"\n [class.slide-down]=\"animationDirection() === 'down'\"\n [attr.data-active-index]=\"activeTabIndex()\"\n [attr.data-animation-key]=\"animationKey()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-tab-vertical{width:100%;height:100%;display:flex;flex-direction:row;overflow:hidden}.tab-sidebar{position:relative;display:flex;flex-direction:column;min-width:200px;height:100%;border-right:2px solid var(--dd-base-300);background:transparent;flex-shrink:0}.tab-button{display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:all .3s ease;position:relative;z-index:1;outline:none;text-align:left;width:100%}.tab-button:hover{color:var(--dd-base-500);background:var(--dd-base-100)}.tab-button.active{color:var(--dd-base-accent-blue);background:var(--dd-base-100)}.tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:transform .3s ease}.tab-button:hover .tab-icon{transform:scale(1.1)}.tab-button.active .tab-icon{transform:scale(1.15)}.tab-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.tab-label{flex:1}.tab-indicator{position:absolute;right:-2px;width:2px;background:var(--dd-base-accent-blue);transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;flex:1;overflow:auto;padding:20px;min-width:0}.tab-content{width:100%;height:100%}.tab-content.slide-down,.tab-content.slide-up{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-down{animation-name:slideInDown}.tab-content.slide-up{animation-name:slideInUp}@keyframes slideInDown{0%{transform:translateY(100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}@keyframes slideInUp{0%{transform:translateY(-100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}\n"] }]
418
+ args: [{ selector: 'duck-dev-tab-vertical', standalone: true, imports: [CommonModule], template: "<div class=\"duck-dev-tab-vertical\">\n <div class=\"tab-sidebar\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n #tabButton\n class=\"tab-button\"\n [class.active]=\"isActive(i)\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n @if (tab.icon) {\n <span class=\"tab-icon\" [innerHTML]=\"tab.icon\"></span>\n }\n <span class=\"tab-label\">{{ tab.label }}</span>\n </button>\n }\n <div\n class=\"tab-indicator\"\n [style.top.px]=\"indicatorTop()\"\n [style.height.px]=\"indicatorHeight()\"\n ></div>\n </div>\n\n <div class=\"tab-content-wrapper\">\n <div\n class=\"tab-content\"\n [class.slide-up]=\"animationDirection() === 'up'\"\n [class.slide-down]=\"animationDirection() === 'down'\"\n [attr.data-active-index]=\"activeTabIndex()\"\n [attr.data-animation-key]=\"animationKey()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-tab-vertical{width:100%;height:100%;display:flex;flex-direction:row;overflow:hidden}.tab-sidebar{position:relative;display:flex;flex-direction:column;min-width:200px;height:100%;border-right:2px solid var(--dd-base-300);background:transparent;flex-shrink:0}.tab-button{display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:all .3s ease;position:relative;z-index:1;outline:none;text-align:left;width:100%}.tab-button:hover{color:var(--dd-base-500);background:var(--dd-base-100)}.tab-button.active{color:var(--dd-base-accent-blue);background:var(--dd-base-100)}.tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:transform .3s ease}.tab-button:hover .tab-icon{transform:scale(1.1)}.tab-button.active .tab-icon{transform:scale(1.15)}.tab-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.tab-label{flex:1}.tab-indicator{position:absolute;right:-2px;width:2px;background:var(--dd-base-accent-blue);transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;flex:1;overflow:auto;padding:20px;min-width:0}.tab-content{width:100%;height:100%}.tab-content.slide-down,.tab-content.slide-up{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-down{animation-name:slideInDown}.tab-content.slide-up{animation-name:slideInUp}@keyframes slideInDown{0%{transform:translateY(100%);opacity:0;filter:blur(4px)}50%{filter:blur(2px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}@keyframes slideInUp{0%{transform:translateY(-100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}\n"] }]
414
419
  }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }] } });
415
420
 
416
421
  class ButtonBlock {
417
- colorViolet = ButtonEnumColor.Violet;
418
- colorOrange = ButtonEnumColor.Orange;
419
- colorWhite = ButtonEnumColor.White;
420
- colorGray = ButtonEnumColor.Gray;
421
- colorDark = ButtonEnumColor.Dark;
422
+ colorViolet = AccentEnumColor.Violet;
423
+ colorOrange = AccentEnumColor.Orange;
424
+ colorWhite = AccentEnumColor.White;
425
+ colorGray = AccentEnumColor.Gray;
426
+ colorDark = AccentEnumColor.Dark;
422
427
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
423
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ButtonBlock, isStandalone: true, selector: "app-button-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'buttons.title' | transloco }}</h1>\n\n <!-- Button Glide Over -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.glideOver.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.glideOver.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-button-glide-over\n textButton=\"\u0422\u0435\u043A\u0441\u0442 \u043A\u043D\u043E\u043F\u043A\u0438\"\n [colorButton]=\"buttonColor\"\n [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.glideOver.inputs' | transloco }}</h3>\n <ul>\n <li><strong>textButton</strong> ({{ 'buttons.glideOver.required' | transloco }}) - {{ 'buttons.glideOver.inputTextButton' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.glideOver.inputColorButton' | transloco }}</li>\n <li><strong>padding</strong> - {{ 'buttons.glideOver.inputPadding' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.glideOver.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleWhite' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"\u041D\u0430\u0436\u043C\u0438 \u043C\u0435\u043D\u044F\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleViolet' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Violet Button\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleOrange' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Orange Button\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleGray' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Gray Button\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleDark' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Dark Button\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Button Blur Lift -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.blurLift.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.blurLift.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-button-blur-lift\n textButton=\"\u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u0442\u0435\u043A\u0441\u0442\"\n [hoverText]=\"'\u0422\u0435\u043A\u0441\u0442 \u043F\u0440\u0438 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0438'\"\n [colorButton]=\"buttonColor\"\n [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.blurLift.inputs' | transloco }}</h3>\n <ul>\n <li><strong>textButton</strong> ({{ 'buttons.blurLift.required' | transloco }}) - {{ 'buttons.blurLift.inputTextButton' | transloco }}</li>\n <li><strong>hoverText</strong> - {{ 'buttons.blurLift.inputHoverText' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.blurLift.inputColorButton' | transloco }}</li>\n <li><strong>padding</strong> - {{ 'buttons.blurLift.inputPadding' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.blurLift.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleWhiteHover' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"\u041D\u0430\u0432\u0435\u0434\u0438 \u043D\u0430 \u043C\u0435\u043D\u044F\" [hoverText]=\"'\u041F\u0440\u0438\u0432\u0435\u0442!'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleViolet' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Click Me\" [hoverText]=\"'Action!'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Hover\" [hoverText]=\"'Orange!'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleGray' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Gray Button\" [hoverText]=\"'Hover'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Dark Button\" [hoverText]=\"'Magic!'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Button Color Flip -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.flip.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.flip.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.flip.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-button-flip\n [text]=\"'Text'\"\n [colorButton]=\"buttonColor\"\n [disabled]=\"false\"\n [direction]=\"'next'\"\n [arrowIndex]=\"0\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.flip.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> - {{ 'buttons.flip.inputText' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.flip.inputColorButton' | transloco }}</li>\n <li><strong>disabled</strong> - {{ 'buttons.flip.inputDisabled' | transloco }}</li>\n <li><strong>direction</strong> - {{ 'buttons.flip.inputDirection' | transloco }}</li>\n <li><strong>arrowIndex</strong> - {{ 'buttons.flip.inputArrowIndex' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.flip.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleWhite' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Click me'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleViolet' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Violet Button'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleOrange' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Orange Button'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleGray' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Gray Button'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleDark' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Dark Button'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.examplePrev' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Prev'\" [direction]=\"'previous'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleNext' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Next'\" [direction]=\"'next'\" [colorButton]=\"colorViolet\" />\n </div>\n </div>\n </div>\n </section>\n <!-- Button Casper -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.casper.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.casper.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.casper.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-button-casper\n [text]=\"'Text'\"\n [isDisabled]=\"false\"\n [colorButton]=\"buttonColor\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.casper.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> \u2014 {{ 'buttons.casper.inputText' | transloco }}</li>\n <li><strong>isDisabled</strong> \u2014 {{ 'buttons.casper.inputIsDisabled' | transloco }}</li>\n <li><strong>colorButton</strong> \u2014 {{ 'buttons.casper.inputColorButton' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.casper.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleWhite' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleViolet' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleOrange' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleGray' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleDark' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-button-glide-over,.demo-container .component-section .examples-block .example-row .example-item duck-dev-button-blur-lift{width:100%;max-width:300px}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: ButtonBlurLift, selector: "duck-dev-button-blur-lift", inputs: ["textButton", "colorButton", "padding", "hoverText"] }, { kind: "component", type: ButtonGlideOver, selector: "duck-dev-button-glide-over", inputs: ["textButton", "colorButton", "padding"] }, { kind: "component", type: ButtonFlip, selector: "duck-dev-button-flip", inputs: ["text", "disabled", "arrowIndex", "direction", "colorButton"] }, { kind: "component", type: ButtonCasper, selector: "duck-dev-button-casper", inputs: ["isDisabled", "text", "colorButton"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
428
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ButtonBlock, isStandalone: true, selector: "app-button-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'buttons.title' | transloco }}</h1>\n\n <!-- Button Glide Over -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.glideOver.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.glideOver.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-button-glide-over\n textButton=\"\u0422\u0435\u043A\u0441\u0442 \u043A\u043D\u043E\u043F\u043A\u0438\"\n [colorButton]=\"buttonColor\"\n [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.glideOver.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>textButton</strong> ({{ 'buttons.glideOver.required' | transloco }}) -\n {{ 'buttons.glideOver.inputTextButton' | transloco }}\n </li>\n <li>\n <strong>colorButton</strong> - {{ 'buttons.glideOver.inputColorButton' | transloco }}\n </li>\n <li><strong>padding</strong> - {{ 'buttons.glideOver.inputPadding' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.glideOver.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleWhite' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"\u041D\u0430\u0436\u043C\u0438 \u043C\u0435\u043D\u044F\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleViolet' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Violet Button\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleOrange' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Orange Button\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleGray' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Gray Button\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleDark' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Dark Button\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Button Blur Lift -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.blurLift.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.blurLift.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-button-blur-lift\n textButton=\"\u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u0442\u0435\u043A\u0441\u0442\"\n [hoverText]=\"'\u0422\u0435\u043A\u0441\u0442 \u043F\u0440\u0438 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0438'\"\n [colorButton]=\"buttonColor\"\n [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.blurLift.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>textButton</strong> ({{ 'buttons.blurLift.required' | transloco }}) -\n {{ 'buttons.blurLift.inputTextButton' | transloco }}\n </li>\n <li><strong>hoverText</strong> - {{ 'buttons.blurLift.inputHoverText' | transloco }}</li>\n <li>\n <strong>colorButton</strong> - {{ 'buttons.blurLift.inputColorButton' | transloco }}\n </li>\n <li><strong>padding</strong> - {{ 'buttons.blurLift.inputPadding' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.blurLift.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleWhiteHover' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"\u041D\u0430\u0432\u0435\u0434\u0438 \u043D\u0430 \u043C\u0435\u043D\u044F\" [hoverText]=\"'\u041F\u0440\u0438\u0432\u0435\u0442!'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleViolet' | transloco }}</p>\n <duck-dev-button-blur-lift\n textButton=\"Click Me\"\n [hoverText]=\"'Action!'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</p>\n <duck-dev-button-blur-lift\n textButton=\"Hover\"\n [hoverText]=\"'Orange!'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleGray' | transloco }}</p>\n <duck-dev-button-blur-lift\n textButton=\"Gray Button\"\n [hoverText]=\"'Hover'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</p>\n <duck-dev-button-blur-lift\n textButton=\"Dark Button\"\n [hoverText]=\"'Magic!'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Button Color Flip -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.flip.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.flip.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.flip.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-button-flip\n [text]=\"'Text'\"\n [colorButton]=\"buttonColor\"\n [disabled]=\"false\"\n [direction]=\"'next'\"\n [arrowIndex]=\"0\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.flip.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> - {{ 'buttons.flip.inputText' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.flip.inputColorButton' | transloco }}</li>\n <li><strong>disabled</strong> - {{ 'buttons.flip.inputDisabled' | transloco }}</li>\n <li><strong>direction</strong> - {{ 'buttons.flip.inputDirection' | transloco }}</li>\n <li><strong>arrowIndex</strong> - {{ 'buttons.flip.inputArrowIndex' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.flip.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleWhite' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Click me'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleViolet' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Violet Button'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleOrange' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Orange Button'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleGray' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Gray Button'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleDark' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Dark Button'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.examplePrev' | transloco }}</p>\n <duck-dev-button-flip\n [text]=\"'Prev'\"\n [direction]=\"'previous'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleNext' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Next'\" [direction]=\"'next'\" [colorButton]=\"colorViolet\" />\n </div>\n </div>\n </div>\n </section>\n <!-- Button Casper -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.casper.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.casper.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.casper.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-button-casper\n [text]=\"'Text'\"\n [isDisabled]=\"false\"\n [colorButton]=\"buttonColor\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.casper.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> \u2014 {{ 'buttons.casper.inputText' | transloco }}</li>\n <li><strong>isDisabled</strong> \u2014 {{ 'buttons.casper.inputIsDisabled' | transloco }}</li>\n <li><strong>colorButton</strong> \u2014 {{ 'buttons.casper.inputColorButton' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.casper.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleWhite' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleViolet' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleOrange' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleGray' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleDark' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-button-glide-over,.demo-container .component-section .examples-block .example-row .example-item duck-dev-button-blur-lift{width:100%;max-width:300px}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: ButtonBlurLift, selector: "duck-dev-button-blur-lift", inputs: ["textButton", "colorButton", "padding", "hoverText"] }, { kind: "component", type: ButtonGlideOver, selector: "duck-dev-button-glide-over", inputs: ["textButton", "colorButton", "padding"] }, { kind: "component", type: ButtonFlip, selector: "duck-dev-button-flip", inputs: ["text", "disabled", "arrowIndex", "direction", "colorButton"] }, { kind: "component", type: ButtonCasper, selector: "duck-dev-button-casper", inputs: ["isDisabled", "text", "colorButton"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
424
429
  }
425
430
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlock, decorators: [{
426
431
  type: Component,
427
- args: [{ selector: 'app-button-block', imports: [
428
- ButtonBlurLift,
429
- ButtonGlideOver,
430
- TranslocoPipe,
431
- ButtonFlip,
432
- ButtonCasper
433
- ], template: "<div class=\"demo-container\">\n <h1>{{ 'buttons.title' | transloco }}</h1>\n\n <!-- Button Glide Over -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.glideOver.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.glideOver.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-button-glide-over\n textButton=\"\u0422\u0435\u043A\u0441\u0442 \u043A\u043D\u043E\u043F\u043A\u0438\"\n [colorButton]=\"buttonColor\"\n [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.glideOver.inputs' | transloco }}</h3>\n <ul>\n <li><strong>textButton</strong> ({{ 'buttons.glideOver.required' | transloco }}) - {{ 'buttons.glideOver.inputTextButton' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.glideOver.inputColorButton' | transloco }}</li>\n <li><strong>padding</strong> - {{ 'buttons.glideOver.inputPadding' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.glideOver.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleWhite' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"\u041D\u0430\u0436\u043C\u0438 \u043C\u0435\u043D\u044F\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleViolet' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Violet Button\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleOrange' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Orange Button\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleGray' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Gray Button\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleDark' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Dark Button\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Button Blur Lift -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.blurLift.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.blurLift.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-button-blur-lift\n textButton=\"\u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u0442\u0435\u043A\u0441\u0442\"\n [hoverText]=\"'\u0422\u0435\u043A\u0441\u0442 \u043F\u0440\u0438 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0438'\"\n [colorButton]=\"buttonColor\"\n [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.blurLift.inputs' | transloco }}</h3>\n <ul>\n <li><strong>textButton</strong> ({{ 'buttons.blurLift.required' | transloco }}) - {{ 'buttons.blurLift.inputTextButton' | transloco }}</li>\n <li><strong>hoverText</strong> - {{ 'buttons.blurLift.inputHoverText' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.blurLift.inputColorButton' | transloco }}</li>\n <li><strong>padding</strong> - {{ 'buttons.blurLift.inputPadding' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.blurLift.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleWhiteHover' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"\u041D\u0430\u0432\u0435\u0434\u0438 \u043D\u0430 \u043C\u0435\u043D\u044F\" [hoverText]=\"'\u041F\u0440\u0438\u0432\u0435\u0442!'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleViolet' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Click Me\" [hoverText]=\"'Action!'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Hover\" [hoverText]=\"'Orange!'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleGray' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Gray Button\" [hoverText]=\"'Hover'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Dark Button\" [hoverText]=\"'Magic!'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Button Color Flip -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.flip.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.flip.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.flip.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-button-flip\n [text]=\"'Text'\"\n [colorButton]=\"buttonColor\"\n [disabled]=\"false\"\n [direction]=\"'next'\"\n [arrowIndex]=\"0\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.flip.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> - {{ 'buttons.flip.inputText' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.flip.inputColorButton' | transloco }}</li>\n <li><strong>disabled</strong> - {{ 'buttons.flip.inputDisabled' | transloco }}</li>\n <li><strong>direction</strong> - {{ 'buttons.flip.inputDirection' | transloco }}</li>\n <li><strong>arrowIndex</strong> - {{ 'buttons.flip.inputArrowIndex' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.flip.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleWhite' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Click me'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleViolet' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Violet Button'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleOrange' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Orange Button'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleGray' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Gray Button'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleDark' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Dark Button'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.examplePrev' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Prev'\" [direction]=\"'previous'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleNext' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Next'\" [direction]=\"'next'\" [colorButton]=\"colorViolet\" />\n </div>\n </div>\n </div>\n </section>\n <!-- Button Casper -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.casper.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.casper.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.casper.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-button-casper\n [text]=\"'Text'\"\n [isDisabled]=\"false\"\n [colorButton]=\"buttonColor\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.casper.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> \u2014 {{ 'buttons.casper.inputText' | transloco }}</li>\n <li><strong>isDisabled</strong> \u2014 {{ 'buttons.casper.inputIsDisabled' | transloco }}</li>\n <li><strong>colorButton</strong> \u2014 {{ 'buttons.casper.inputColorButton' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.casper.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleWhite' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleViolet' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleOrange' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleGray' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleDark' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-button-glide-over,.demo-container .component-section .examples-block .example-row .example-item duck-dev-button-blur-lift{width:100%;max-width:300px}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
432
+ args: [{ selector: 'app-button-block', imports: [ButtonBlurLift, ButtonGlideOver, TranslocoPipe, ButtonFlip, ButtonCasper], template: "<div class=\"demo-container\">\n <h1>{{ 'buttons.title' | transloco }}</h1>\n\n <!-- Button Glide Over -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.glideOver.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.glideOver.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-button-glide-over\n textButton=\"\u0422\u0435\u043A\u0441\u0442 \u043A\u043D\u043E\u043F\u043A\u0438\"\n [colorButton]=\"buttonColor\"\n [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.glideOver.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>textButton</strong> ({{ 'buttons.glideOver.required' | transloco }}) -\n {{ 'buttons.glideOver.inputTextButton' | transloco }}\n </li>\n <li>\n <strong>colorButton</strong> - {{ 'buttons.glideOver.inputColorButton' | transloco }}\n </li>\n <li><strong>padding</strong> - {{ 'buttons.glideOver.inputPadding' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.glideOver.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleWhite' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"\u041D\u0430\u0436\u043C\u0438 \u043C\u0435\u043D\u044F\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleViolet' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Violet Button\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleOrange' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Orange Button\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleGray' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Gray Button\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleDark' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Dark Button\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Button Blur Lift -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.blurLift.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.blurLift.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-button-blur-lift\n textButton=\"\u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u0442\u0435\u043A\u0441\u0442\"\n [hoverText]=\"'\u0422\u0435\u043A\u0441\u0442 \u043F\u0440\u0438 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0438'\"\n [colorButton]=\"buttonColor\"\n [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.blurLift.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>textButton</strong> ({{ 'buttons.blurLift.required' | transloco }}) -\n {{ 'buttons.blurLift.inputTextButton' | transloco }}\n </li>\n <li><strong>hoverText</strong> - {{ 'buttons.blurLift.inputHoverText' | transloco }}</li>\n <li>\n <strong>colorButton</strong> - {{ 'buttons.blurLift.inputColorButton' | transloco }}\n </li>\n <li><strong>padding</strong> - {{ 'buttons.blurLift.inputPadding' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.blurLift.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleWhiteHover' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"\u041D\u0430\u0432\u0435\u0434\u0438 \u043D\u0430 \u043C\u0435\u043D\u044F\" [hoverText]=\"'\u041F\u0440\u0438\u0432\u0435\u0442!'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleViolet' | transloco }}</p>\n <duck-dev-button-blur-lift\n textButton=\"Click Me\"\n [hoverText]=\"'Action!'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</p>\n <duck-dev-button-blur-lift\n textButton=\"Hover\"\n [hoverText]=\"'Orange!'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleGray' | transloco }}</p>\n <duck-dev-button-blur-lift\n textButton=\"Gray Button\"\n [hoverText]=\"'Hover'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</p>\n <duck-dev-button-blur-lift\n textButton=\"Dark Button\"\n [hoverText]=\"'Magic!'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Button Color Flip -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.flip.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.flip.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.flip.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-button-flip\n [text]=\"'Text'\"\n [colorButton]=\"buttonColor\"\n [disabled]=\"false\"\n [direction]=\"'next'\"\n [arrowIndex]=\"0\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.flip.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> - {{ 'buttons.flip.inputText' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.flip.inputColorButton' | transloco }}</li>\n <li><strong>disabled</strong> - {{ 'buttons.flip.inputDisabled' | transloco }}</li>\n <li><strong>direction</strong> - {{ 'buttons.flip.inputDirection' | transloco }}</li>\n <li><strong>arrowIndex</strong> - {{ 'buttons.flip.inputArrowIndex' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.flip.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleWhite' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Click me'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleViolet' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Violet Button'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleOrange' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Orange Button'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleGray' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Gray Button'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleDark' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Dark Button'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.examplePrev' | transloco }}</p>\n <duck-dev-button-flip\n [text]=\"'Prev'\"\n [direction]=\"'previous'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleNext' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Next'\" [direction]=\"'next'\" [colorButton]=\"colorViolet\" />\n </div>\n </div>\n </div>\n </section>\n <!-- Button Casper -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.casper.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.casper.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.casper.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-button-casper\n [text]=\"'Text'\"\n [isDisabled]=\"false\"\n [colorButton]=\"buttonColor\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.casper.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> \u2014 {{ 'buttons.casper.inputText' | transloco }}</li>\n <li><strong>isDisabled</strong> \u2014 {{ 'buttons.casper.inputIsDisabled' | transloco }}</li>\n <li><strong>colorButton</strong> \u2014 {{ 'buttons.casper.inputColorButton' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.casper.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleWhite' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleViolet' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleOrange' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleGray' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleDark' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-button-glide-over,.demo-container .component-section .examples-block .example-row .example-item duck-dev-button-blur-lift{width:100%;max-width:300px}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
434
433
  }] });
435
434
 
436
435
  class LoaderBlock {
437
436
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
438
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderBlock, isStandalone: true, selector: "app-loader-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'loaders.title' | transloco }}</h1>\n\n <!-- Loader Classic -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.classic.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-loader-classic /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n <duck-dev-loader-classic />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Text Bubble -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.textBubble.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-loader-loading-bubble /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n <duck-dev-loader-loading-bubble />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Three Dots -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.threeDots.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n <pre><code>&lt;lib-loader-three-dots /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <duck-dev-loader-three-dots />\n </div>\n </div>\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:40px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease;min-height:150px;justify-content:center}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item lib-loader-three-dots{display:flex;justify-content:center;align-items:center}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: LoaderClassic, selector: "duck-dev-loader-classic" }, { kind: "component", type: LoaderLoadingBubble, selector: "duck-dev-loader-loading-bubble" }, { kind: "component", type: LoaderThreeDots, selector: "duck-dev-loader-three-dots" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
437
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderBlock, isStandalone: true, selector: "app-loader-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'loaders.title' | transloco }}</h1>\n\n <!-- Loader Classic -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.classic.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-loader-classic /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n <duck-dev-loader-classic />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Text Bubble -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.textBubble.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-loader-loading-bubble /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n <duck-dev-loader-loading-bubble />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Three Dots -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.threeDots.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n <pre><code>&lt;lib-loader-three-dots /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <duck-dev-loader-three-dots />\n </div>\n </div>\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:40px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease;min-height:150px;justify-content:center}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item lib-loader-three-dots{display:flex;justify-content:center;align-items:center}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: LoaderClassic, selector: "duck-dev-loader-classic" }, { kind: "component", type: LoaderLoadingBubble, selector: "duck-dev-loader-loading-bubble" }, { kind: "component", type: LoaderThreeDots, selector: "duck-dev-loader-three-dots" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
439
438
  }
440
439
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderBlock, decorators: [{
441
440
  type: Component,
442
- args: [{ selector: 'app-loader-block', imports: [
443
- LoaderClassic,
444
- LoaderLoadingBubble,
445
- LoaderThreeDots,
446
- TranslocoPipe
447
- ], template: "<div class=\"demo-container\">\n <h1>{{ 'loaders.title' | transloco }}</h1>\n\n <!-- Loader Classic -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.classic.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-loader-classic /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n <duck-dev-loader-classic />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Text Bubble -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.textBubble.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-loader-loading-bubble /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n <duck-dev-loader-loading-bubble />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Three Dots -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.threeDots.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n <pre><code>&lt;lib-loader-three-dots /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <duck-dev-loader-three-dots />\n </div>\n </div>\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:40px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease;min-height:150px;justify-content:center}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item lib-loader-three-dots{display:flex;justify-content:center;align-items:center}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
441
+ args: [{ selector: 'app-loader-block', imports: [LoaderClassic, LoaderLoadingBubble, LoaderThreeDots, TranslocoPipe], template: "<div class=\"demo-container\">\n <h1>{{ 'loaders.title' | transloco }}</h1>\n\n <!-- Loader Classic -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.classic.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-loader-classic /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n <duck-dev-loader-classic />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Text Bubble -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.textBubble.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-loader-loading-bubble /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n <duck-dev-loader-loading-bubble />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Three Dots -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.threeDots.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n <pre><code>&lt;lib-loader-three-dots /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <duck-dev-loader-three-dots />\n </div>\n </div>\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:40px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease;min-height:150px;justify-content:center}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item lib-loader-three-dots{display:flex;justify-content:center;align-items:center}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
448
442
  }] });
449
443
 
450
444
  class TabsBlock {
451
445
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
452
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: TabsBlock, isStandalone: true, selector: "app-tabs-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n\n <!-- Duck Dev Tab -->\n <section class=\"component-section\">\n <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'tabsComponent.tab.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'tabsComponent.tab.usage' | transloco }}</h3>\n <p>{{ 'tabsComponent.tab.usageText1' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText2' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tabsComponent.tab.inputs' | transloco }}</h3>\n <ul>\n <li><strong>tabs</strong> ({{ 'tabsComponent.tab.required' | transloco }}) - {{ 'tabsComponent.tab.inputTabs' | transloco }}\n <ul>\n <li><strong>id</strong> (string) - {{ 'tabsComponent.tab.inputTabsId' | transloco }}</li>\n <li><strong>label</strong> (string) - {{ 'tabsComponent.tab.inputTabsLabel' | transloco }}</li>\n <li><strong>content</strong> (any, {{ 'tabsComponent.tab.optional' | transloco }}) - {{ 'tabsComponent.tab.inputTabsContent' | transloco }}</li>\n </ul>\n </li>\n </ul>\n </div>\n\n <div class=\"outputs-block\">\n <h3>{{ 'tabsComponent.tab.outputs' | transloco }}</h3>\n <ul>\n <li><strong>tabChange</strong> - {{ 'tabsComponent.tab.outputTabChange' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'tabsComponent.tab.features' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.feature1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature5' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature6' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'tabsComponent.tab.api' | transloco }}</h3>\n <ul>\n <li><strong>id: string</strong> - {{ 'tabsComponent.tab.apiId' | transloco }}</li>\n <li><strong>label: string</strong> - {{ 'tabsComponent.tab.apiLabel' | transloco }}</li>\n <li><strong>content?: any</strong> - {{ 'tabsComponent.tab.apiContent' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'tabsComponent.tab.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.implementation1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation5' | transloco }}</li>\n </ul>\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
446
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: TabsBlock, isStandalone: true, selector: "app-tabs-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n\n <!-- Duck Dev Tab -->\n <section class=\"component-section\">\n <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'tabsComponent.tab.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'tabsComponent.tab.usage' | transloco }}</h3>\n <p>{{ 'tabsComponent.tab.usageText1' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText2' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tabsComponent.tab.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>tabs</strong> ({{ 'tabsComponent.tab.required' | transloco }}) -\n {{ 'tabsComponent.tab.inputTabs' | transloco }}\n <ul>\n <li>\n <strong>id</strong> (string) - {{ 'tabsComponent.tab.inputTabsId' | transloco }}\n </li>\n <li>\n <strong>label</strong> (string) - {{ 'tabsComponent.tab.inputTabsLabel' | transloco }}\n </li>\n <li>\n <strong>content</strong> (any, {{ 'tabsComponent.tab.optional' | transloco }}) -\n {{ 'tabsComponent.tab.inputTabsContent' | transloco }}\n </li>\n </ul>\n </li>\n </ul>\n </div>\n\n <div class=\"outputs-block\">\n <h3>{{ 'tabsComponent.tab.outputs' | transloco }}</h3>\n <ul>\n <li><strong>tabChange</strong> - {{ 'tabsComponent.tab.outputTabChange' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'tabsComponent.tab.features' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.feature1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature5' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature6' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'tabsComponent.tab.api' | transloco }}</h3>\n <ul>\n <li><strong>id: string</strong> - {{ 'tabsComponent.tab.apiId' | transloco }}</li>\n <li><strong>label: string</strong> - {{ 'tabsComponent.tab.apiLabel' | transloco }}</li>\n <li><strong>content?: any</strong> - {{ 'tabsComponent.tab.apiContent' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'tabsComponent.tab.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.implementation1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation5' | transloco }}</li>\n </ul>\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
453
447
  }
454
448
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, decorators: [{
455
449
  type: Component,
456
- args: [{ selector: 'app-tabs-block', imports: [
457
- TranslocoPipe
458
- ], template: "<div class=\"demo-container\">\n <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n\n <!-- Duck Dev Tab -->\n <section class=\"component-section\">\n <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'tabsComponent.tab.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'tabsComponent.tab.usage' | transloco }}</h3>\n <p>{{ 'tabsComponent.tab.usageText1' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText2' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tabsComponent.tab.inputs' | transloco }}</h3>\n <ul>\n <li><strong>tabs</strong> ({{ 'tabsComponent.tab.required' | transloco }}) - {{ 'tabsComponent.tab.inputTabs' | transloco }}\n <ul>\n <li><strong>id</strong> (string) - {{ 'tabsComponent.tab.inputTabsId' | transloco }}</li>\n <li><strong>label</strong> (string) - {{ 'tabsComponent.tab.inputTabsLabel' | transloco }}</li>\n <li><strong>content</strong> (any, {{ 'tabsComponent.tab.optional' | transloco }}) - {{ 'tabsComponent.tab.inputTabsContent' | transloco }}</li>\n </ul>\n </li>\n </ul>\n </div>\n\n <div class=\"outputs-block\">\n <h3>{{ 'tabsComponent.tab.outputs' | transloco }}</h3>\n <ul>\n <li><strong>tabChange</strong> - {{ 'tabsComponent.tab.outputTabChange' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'tabsComponent.tab.features' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.feature1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature5' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature6' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'tabsComponent.tab.api' | transloco }}</h3>\n <ul>\n <li><strong>id: string</strong> - {{ 'tabsComponent.tab.apiId' | transloco }}</li>\n <li><strong>label: string</strong> - {{ 'tabsComponent.tab.apiLabel' | transloco }}</li>\n <li><strong>content?: any</strong> - {{ 'tabsComponent.tab.apiContent' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'tabsComponent.tab.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.implementation1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation5' | transloco }}</li>\n </ul>\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}}\n"] }]
450
+ args: [{ selector: 'app-tabs-block', imports: [TranslocoPipe], template: "<div class=\"demo-container\">\n <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n\n <!-- Duck Dev Tab -->\n <section class=\"component-section\">\n <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'tabsComponent.tab.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'tabsComponent.tab.usage' | transloco }}</h3>\n <p>{{ 'tabsComponent.tab.usageText1' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText2' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tabsComponent.tab.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>tabs</strong> ({{ 'tabsComponent.tab.required' | transloco }}) -\n {{ 'tabsComponent.tab.inputTabs' | transloco }}\n <ul>\n <li>\n <strong>id</strong> (string) - {{ 'tabsComponent.tab.inputTabsId' | transloco }}\n </li>\n <li>\n <strong>label</strong> (string) - {{ 'tabsComponent.tab.inputTabsLabel' | transloco }}\n </li>\n <li>\n <strong>content</strong> (any, {{ 'tabsComponent.tab.optional' | transloco }}) -\n {{ 'tabsComponent.tab.inputTabsContent' | transloco }}\n </li>\n </ul>\n </li>\n </ul>\n </div>\n\n <div class=\"outputs-block\">\n <h3>{{ 'tabsComponent.tab.outputs' | transloco }}</h3>\n <ul>\n <li><strong>tabChange</strong> - {{ 'tabsComponent.tab.outputTabChange' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'tabsComponent.tab.features' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.feature1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature5' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature6' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'tabsComponent.tab.api' | transloco }}</h3>\n <ul>\n <li><strong>id: string</strong> - {{ 'tabsComponent.tab.apiId' | transloco }}</li>\n <li><strong>label: string</strong> - {{ 'tabsComponent.tab.apiLabel' | transloco }}</li>\n <li><strong>content?: any</strong> - {{ 'tabsComponent.tab.apiContent' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'tabsComponent.tab.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.implementation1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation5' | transloco }}</li>\n </ul>\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}}\n"] }]
459
451
  }] });
460
452
 
461
453
  const duckDevDockMedium = `
@@ -1916,7 +1908,7 @@ const CUI_ICONS = {
1916
1908
  duckDevPaletteSm,
1917
1909
  duckDevLogOutMedium,
1918
1910
  duckDevEyeBold,
1919
- duckDevEyeBoldMedium
1911
+ duckDevEyeBoldMedium,
1920
1912
  };
1921
1913
 
1922
1914
  function camelToKebab(input) {
@@ -1928,12 +1920,14 @@ function camelToKebab(input) {
1928
1920
  }
1929
1921
  function titleFromKey(key) {
1930
1922
  const withoutPrefix = key.startsWith('duckDev') ? key.substring('duckDev'.length) : key;
1931
- const words = withoutPrefix.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/([A-Z])([A-Z][a-z])/g, '$1 $2');
1923
+ const words = withoutPrefix
1924
+ .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
1925
+ .replace(/([A-Z])([A-Z][a-z])/g, '$1 $2');
1932
1926
  // Trim and capitalize first letter of each word (keep existing upper case like V2)
1933
1927
  return words
1934
1928
  .trim()
1935
1929
  .split(/\s+/)
1936
- .map(w => w.charAt(0).toUpperCase() + w.slice(1))
1930
+ .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
1937
1931
  .join(' ');
1938
1932
  }
1939
1933
  const svgIcons = Object.entries(CUI_ICONS).map(([key, svg]) => {
@@ -1955,13 +1949,11 @@ class DuckDevInput {
1955
1949
  formInputType = input('input', { ...(ngDevMode ? { debugName: "formInputType" } : {}) });
1956
1950
  errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
1957
1951
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
1958
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInput, isStandalone: true, selector: "duck-dev-input", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<label\n [for]=\"controlName()\"\n class=\"form-label\"\n>\n {{ label() }}\n</label>\n\n<div\n class=\"form-field\"\n [class.checkbox-inout-field]=\"formInputType() === 'checkbox'\"\n [formGroup]=\"form()\"\n>\n @switch (formInputType()) {\n @case ('checkbox') {\n <div class=\"checkbox-wrapper\">\n <input\n class=\"inp-cbx\"\n [id]=\"controlName()\"\n type=\"checkbox\"\n formControlName=\"{{ controlName() }}\"\n />\n <label\n class=\"cbx\"\n [for]=\"controlName()\"\n >\n <span>\n <svg\n width=\"12px\"\n height=\"10px\"\n viewbox=\"0 0 12 10\"\n >\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input form-input_textarea\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n [placeholder]=\"placeholder()\"\n ></textarea>\n }\n @default {\n <input\n [id]=\"controlName()\"\n [type]=\"type()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n [placeholder]=\"placeholder()\"\n />\n }\n }\n\n @if (errorMessage()) {\n <div class=\"error-message\">\n {{ errorMessage() }}\n </div>\n }\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;height:min-content}.form-field{height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:20px}.form-label{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:400;display:block;margin-bottom:6px;color:var(--dd-base-600)}.form-input_textarea{height:100%;resize:none}.form-input{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:500;width:100%;padding:12px 16px;border:1.5px solid var(--dd-base-300);border-radius:30px;color:var(--dd-base-600);background:var(--dd-base-0);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--dd-accent-blue);box-shadow:0 0 0 3px var(--dd-base-300)}.form-input::placeholder{color:var(--dd-gray-400)}.form-input.error{border-color:var(--dd-accent-orange);box-shadow:0 0 0 3px #ef44441a}.error-message{position:absolute;left:0;right:0;bottom:0;margin-top:0;font-size:14px;color:var(--dd-accent-orange);pointer-events:none}.content-text{width:100%}.checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:2px;margin:auto;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:5px;transform:scale(1);vertical-align:middle;border:1px solid var(--dd-base-300);transition:all .2s ease}.checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--dd-accent-blue);display:block;transform:scale(0);opacity:1;border-radius:50%}.checkbox-wrapper .cbx span:last-child{padding-left:8px}.checkbox-wrapper .cbx:hover span:first-child{border-color:var(--dd-accent-blue)}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child{background:var(--dd-accent-blue);border-color:var(--dd-accent-blue);animation:wave .4s ease}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave{50%{transform:scale(.9)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
1952
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInput, isStandalone: true, selector: "duck-dev-input", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<label [for]=\"controlName()\" class=\"form-label\">\n {{ label() }}\n</label>\n\n<div\n class=\"form-field\"\n [class.checkbox-inout-field]=\"formInputType() === 'checkbox'\"\n [formGroup]=\"form()\"\n>\n @switch (formInputType()) {\n @case ('checkbox') {\n <div class=\"checkbox-wrapper\">\n <input\n class=\"inp-cbx\"\n [id]=\"controlName()\"\n type=\"checkbox\"\n formControlName=\"{{ controlName() }}\"\n />\n <label class=\"cbx\" [for]=\"controlName()\">\n <span>\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input form-input_textarea\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n [placeholder]=\"placeholder()\"\n ></textarea>\n }\n @default {\n <input\n [id]=\"controlName()\"\n [type]=\"type()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n [placeholder]=\"placeholder()\"\n />\n }\n }\n\n @if (errorMessage()) {\n <div class=\"error-message\">\n {{ errorMessage() }}\n </div>\n }\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;height:min-content}.form-field{height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:20px}.form-label{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:400;display:block;margin-bottom:6px;color:var(--dd-base-600)}.form-input_textarea{height:100%;resize:none}.form-input{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:500;width:100%;padding:12px 16px;border:1.5px solid var(--dd-base-300);border-radius:30px;color:var(--dd-base-600);background:var(--dd-base-0);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--dd-accent-blue);box-shadow:0 0 0 3px var(--dd-base-300)}.form-input::placeholder{color:var(--dd-gray-400)}.form-input.error{border-color:var(--dd-accent-orange);box-shadow:0 0 0 3px #ef44441a}.error-message{position:absolute;left:0;right:0;bottom:0;margin-top:0;font-size:14px;color:var(--dd-accent-orange);pointer-events:none}.content-text{width:100%}.checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:2px;margin:auto;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:5px;transform:scale(1);vertical-align:middle;border:1px solid var(--dd-base-300);transition:all .2s ease}.checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--dd-accent-blue);display:block;transform:scale(0);opacity:1;border-radius:50%}.checkbox-wrapper .cbx span:last-child{padding-left:8px}.checkbox-wrapper .cbx:hover span:first-child{border-color:var(--dd-accent-blue)}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child{background:var(--dd-accent-blue);border-color:var(--dd-accent-blue);animation:wave .4s ease}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave{50%{transform:scale(.9)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
1959
1953
  }
1960
1954
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInput, decorators: [{
1961
1955
  type: Component,
1962
- args: [{ selector: 'duck-dev-input', imports: [
1963
- ReactiveFormsModule
1964
- ], template: "<label\n [for]=\"controlName()\"\n class=\"form-label\"\n>\n {{ label() }}\n</label>\n\n<div\n class=\"form-field\"\n [class.checkbox-inout-field]=\"formInputType() === 'checkbox'\"\n [formGroup]=\"form()\"\n>\n @switch (formInputType()) {\n @case ('checkbox') {\n <div class=\"checkbox-wrapper\">\n <input\n class=\"inp-cbx\"\n [id]=\"controlName()\"\n type=\"checkbox\"\n formControlName=\"{{ controlName() }}\"\n />\n <label\n class=\"cbx\"\n [for]=\"controlName()\"\n >\n <span>\n <svg\n width=\"12px\"\n height=\"10px\"\n viewbox=\"0 0 12 10\"\n >\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input form-input_textarea\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n [placeholder]=\"placeholder()\"\n ></textarea>\n }\n @default {\n <input\n [id]=\"controlName()\"\n [type]=\"type()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n [placeholder]=\"placeholder()\"\n />\n }\n }\n\n @if (errorMessage()) {\n <div class=\"error-message\">\n {{ errorMessage() }}\n </div>\n }\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;height:min-content}.form-field{height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:20px}.form-label{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:400;display:block;margin-bottom:6px;color:var(--dd-base-600)}.form-input_textarea{height:100%;resize:none}.form-input{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:500;width:100%;padding:12px 16px;border:1.5px solid var(--dd-base-300);border-radius:30px;color:var(--dd-base-600);background:var(--dd-base-0);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--dd-accent-blue);box-shadow:0 0 0 3px var(--dd-base-300)}.form-input::placeholder{color:var(--dd-gray-400)}.form-input.error{border-color:var(--dd-accent-orange);box-shadow:0 0 0 3px #ef44441a}.error-message{position:absolute;left:0;right:0;bottom:0;margin-top:0;font-size:14px;color:var(--dd-accent-orange);pointer-events:none}.content-text{width:100%}.checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:2px;margin:auto;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:5px;transform:scale(1);vertical-align:middle;border:1px solid var(--dd-base-300);transition:all .2s ease}.checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--dd-accent-blue);display:block;transform:scale(0);opacity:1;border-radius:50%}.checkbox-wrapper .cbx span:last-child{padding-left:8px}.checkbox-wrapper .cbx:hover span:first-child{border-color:var(--dd-accent-blue)}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child{background:var(--dd-accent-blue);border-color:var(--dd-accent-blue);animation:wave .4s ease}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave{50%{transform:scale(.9)}}\n"] }]
1956
+ args: [{ selector: 'duck-dev-input', imports: [ReactiveFormsModule], template: "<label [for]=\"controlName()\" class=\"form-label\">\n {{ label() }}\n</label>\n\n<div\n class=\"form-field\"\n [class.checkbox-inout-field]=\"formInputType() === 'checkbox'\"\n [formGroup]=\"form()\"\n>\n @switch (formInputType()) {\n @case ('checkbox') {\n <div class=\"checkbox-wrapper\">\n <input\n class=\"inp-cbx\"\n [id]=\"controlName()\"\n type=\"checkbox\"\n formControlName=\"{{ controlName() }}\"\n />\n <label class=\"cbx\" [for]=\"controlName()\">\n <span>\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input form-input_textarea\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n [placeholder]=\"placeholder()\"\n ></textarea>\n }\n @default {\n <input\n [id]=\"controlName()\"\n [type]=\"type()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n [placeholder]=\"placeholder()\"\n />\n }\n }\n\n @if (errorMessage()) {\n <div class=\"error-message\">\n {{ errorMessage() }}\n </div>\n }\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;height:min-content}.form-field{height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:20px}.form-label{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:400;display:block;margin-bottom:6px;color:var(--dd-base-600)}.form-input_textarea{height:100%;resize:none}.form-input{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:500;width:100%;padding:12px 16px;border:1.5px solid var(--dd-base-300);border-radius:30px;color:var(--dd-base-600);background:var(--dd-base-0);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--dd-accent-blue);box-shadow:0 0 0 3px var(--dd-base-300)}.form-input::placeholder{color:var(--dd-gray-400)}.form-input.error{border-color:var(--dd-accent-orange);box-shadow:0 0 0 3px #ef44441a}.error-message{position:absolute;left:0;right:0;bottom:0;margin-top:0;font-size:14px;color:var(--dd-accent-orange);pointer-events:none}.content-text{width:100%}.checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:2px;margin:auto;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:5px;transform:scale(1);vertical-align:middle;border:1px solid var(--dd-base-300);transition:all .2s ease}.checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--dd-accent-blue);display:block;transform:scale(0);opacity:1;border-radius:50%}.checkbox-wrapper .cbx span:last-child{padding-left:8px}.checkbox-wrapper .cbx:hover span:first-child{border-color:var(--dd-accent-blue)}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child{background:var(--dd-accent-blue);border-color:var(--dd-accent-blue);animation:wave .4s ease}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave{50%{transform:scale(.9)}}\n"] }]
1965
1957
  }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputType", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
1966
1958
 
1967
1959
  class DuckDevNotificationService {
@@ -1978,7 +1970,7 @@ class DuckDevNotificationService {
1978
1970
  message: options.message,
1979
1971
  duration: options.duration ?? 3000,
1980
1972
  };
1981
- this.items.update(list => [item, ...list]);
1973
+ this.items.update((list) => [item, ...list]);
1982
1974
  if (item.duration > 0) {
1983
1975
  const t = window.setTimeout(() => this.remove(id), item.duration + 350);
1984
1976
  this.timers.set(id, t);
@@ -2000,10 +1992,10 @@ class DuckDevNotificationService {
2000
1992
  clearTimeout(timer);
2001
1993
  this.timers.delete(id);
2002
1994
  }
2003
- this.items.update(list => list.filter(i => i.id !== id));
1995
+ this.items.update((list) => list.filter((i) => i.id !== id));
2004
1996
  }
2005
1997
  clear() {
2006
- this.items().forEach(i => this.remove(i.id));
1998
+ this.items().forEach((i) => this.remove(i.id));
2007
1999
  }
2008
2000
  defaultTitle(type) {
2009
2001
  switch (type) {
@@ -2039,7 +2031,7 @@ class DuckDevSvgBlock {
2039
2031
  const q = this.search().trim().toLowerCase();
2040
2032
  if (!q)
2041
2033
  return this.icons;
2042
- return this.icons.filter(i => i.name.toLowerCase().includes(q) || i.id.toLowerCase().includes(q));
2034
+ return this.icons.filter((i) => i.name.toLowerCase().includes(q) || i.id.toLowerCase().includes(q));
2043
2035
  }, { ...(ngDevMode ? { debugName: "filteredIcons" } : {}) });
2044
2036
  totalPages = computed(() => {
2045
2037
  const total = this.filteredIcons().length;
@@ -2108,22 +2100,20 @@ class DuckDevSvgBlock {
2108
2100
  this.page.set(p + 1);
2109
2101
  }
2110
2102
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSvgBlock, deps: [{ token: i1$1.DomSanitizer }, { token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
2111
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSvgBlock, isStandalone: true, selector: "app-duck-dev-svg-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'svgComponent.description' | transloco }}</h2>\n <p class=\"description\">\n {{ 'svgComponent.descriptionText' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n\n <div class=\"icons-toolbar\">\n <duck-dev-input\n [form]=\"searchForm\"\n controlName=\"search\"\n [placeholder]=\"'svgComponent.searchPlaceholder' | transloco\"\n type=\"text\"\n />\n <div class=\"icons-stats\">\n Page {{ page() }} / {{ totalPages() }} \u2022\n Showing\n {{ (paginatedIcons().length === 0) ? 0 : ((page() - 1) * pageSize + 1) }}\u2013\n {{ ((page() - 1) * pageSize) + paginatedIcons().length }}\n of {{ filteredIcons().length }}\n </div>\n </div>\n\n @if (filteredIcons().length === 0) {\n <p>No icons found.</p>\n } @else {\n <div class=\"icons-showcase\">\n @for (icon of paginatedIcons(); track icon.id) {\n <div class=\"icon-card\" (click)=\"copyTag(icon.id)\" role=\"button\" tabindex=\"0\">\n <div class=\"icon-display\" [innerHTML]=\"getSafeHtml(icon.svg)\"></div>\n <div class=\"icon-name\">{{ icon.name }}</div>\n <div class=\"icon-id\">{{ icon.id }}</div>\n <code class=\"icon-tag\" [title]=\"(copiedId() === icon.id) ? ('svgComponent.copied' | transloco) : ('svgComponent.clickToCopy' | transloco)\">&lt;{{ icon.id }}&gt;</code>\n <div class=\"copy-hint\">{{ (copiedId() === icon.id) ? ('svgComponent.copied' | transloco) : ('svgComponent.clickToCopy' | transloco) }}</div>\n </div>\n }\n </div>\n\n <div class=\"pagination-controls\">\n <duck-dev-button-flip [text]=\"'Prev'\" (click)=\"prevPage()\" [direction]=\"'previous'\"></duck-dev-button-flip>\n <span>Page {{ page() }} of {{ totalPages() }}</span>\n <duck-dev-button-flip [text]=\"'Next'\" (click)=\"nextPage()\"></duck-dev-button-flip>\n </div>\n }\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n <ol>\n <li>{{ 'svgComponent.step1' | transloco }}</li>\n <li>{{ 'svgComponent.step2' | transloco }}</li>\n <li>{{ 'svgComponent.step3' | transloco }}</li>\n </ol>\n </div>\n </section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}.component-section{margin-bottom:40px}.component-section h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}.component-section h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.component-section .description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-200);border-radius:8px;transition:all .3s ease;cursor:pointer}.icon-card:hover{border-color:var(--dd-base-200);background:var(--dd-base-50);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.icon-card:hover .icon-display{transform:scale(1.1);color:var(--dd-base-0)}.icon-display{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--dd-base-0);transition:all .3s ease}.icon-display ::ng-deep svg{width:100%;height:100%;fill:currentColor}.icon-name{font-size:14px;font-weight:500;color:var(--dd-base-600);margin-bottom:4px;text-align:center}.icon-id{font-size:12px;color:var(--dd-base-400);font-family:monospace;text-align:center}.icon-tag{font-size:11px;color:var(--dd-base-600);font-family:monospace;background:var(--dd-base-200);padding:4px 8px;border-radius:4px;margin-top:8px;text-align:center;border:1px solid var(--dd-base-300)}.copy-hint{position:absolute;bottom:8px;right:8px;font-size:10px;color:var(--dd-base-500);background:var(--dd-base-0);border:1px solid var(--dd-base-200);padding:2px 6px;border-radius:4px;pointer-events:none}.pagination-controls{display:flex;justify-content:space-around;align-items:center}\n"], dependencies: [{ kind: "component", type: DuckDevInput, selector: "duck-dev-input", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "errorMessage"] }, { kind: "component", type: ButtonFlip, selector: "duck-dev-button-flip", inputs: ["text", "disabled", "arrowIndex", "direction", "colorButton"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
2103
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSvgBlock, isStandalone: true, selector: "app-duck-dev-svg-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'svgComponent.description' | transloco }}</h2>\n <p class=\"description\">\n {{ 'svgComponent.descriptionText' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n\n <div class=\"icons-toolbar\">\n <duck-dev-input\n [form]=\"searchForm\"\n controlName=\"search\"\n [placeholder]=\"'svgComponent.searchPlaceholder' | transloco\"\n type=\"text\"\n />\n <div class=\"icons-stats\">\n Page {{ page() }} / {{ totalPages() }} \u2022 Showing\n {{ paginatedIcons().length === 0 ? 0 : (page() - 1) * pageSize + 1 }}\u2013\n {{ (page() - 1) * pageSize + paginatedIcons().length }}\n of {{ filteredIcons().length }}\n </div>\n </div>\n\n @if (filteredIcons().length === 0) {\n <p>No icons found.</p>\n } @else {\n <div class=\"icons-showcase\">\n @for (icon of paginatedIcons(); track icon.id) {\n <div class=\"icon-card\" (click)=\"copyTag(icon.id)\" role=\"button\" tabindex=\"0\">\n <div class=\"icon-display\" [innerHTML]=\"getSafeHtml(icon.svg)\"></div>\n <div class=\"icon-name\">{{ icon.name }}</div>\n <div class=\"icon-id\">{{ icon.id }}</div>\n <code\n class=\"icon-tag\"\n [title]=\"\n copiedId() === icon.id\n ? ('svgComponent.copied' | transloco)\n : ('svgComponent.clickToCopy' | transloco)\n \"\n >&lt;{{ icon.id }}&gt;</code\n >\n <div class=\"copy-hint\">\n {{\n copiedId() === icon.id\n ? ('svgComponent.copied' | transloco)\n : ('svgComponent.clickToCopy' | transloco)\n }}\n </div>\n </div>\n }\n </div>\n\n <div class=\"pagination-controls\">\n <duck-dev-button-flip\n [text]=\"'Prev'\"\n (click)=\"prevPage()\"\n [direction]=\"'previous'\"\n ></duck-dev-button-flip>\n <span>Page {{ page() }} of {{ totalPages() }}</span>\n <duck-dev-button-flip [text]=\"'Next'\" (click)=\"nextPage()\"></duck-dev-button-flip>\n </div>\n }\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n <ol>\n <li>{{ 'svgComponent.step1' | transloco }}</li>\n <li>{{ 'svgComponent.step2' | transloco }}</li>\n <li>{{ 'svgComponent.step3' | transloco }}</li>\n </ol>\n </div>\n </section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}.component-section{margin-bottom:40px}.component-section h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}.component-section h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.component-section .description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-200);border-radius:8px;transition:all .3s ease;cursor:pointer}.icon-card:hover{border-color:var(--dd-base-200);background:var(--dd-base-50);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.icon-card:hover .icon-display{transform:scale(1.1);color:var(--dd-base-0)}.icon-display{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--dd-base-0);transition:all .3s ease}.icon-display ::ng-deep svg{width:100%;height:100%;fill:currentColor}.icon-name{font-size:14px;font-weight:500;color:var(--dd-base-600);margin-bottom:4px;text-align:center}.icon-id{font-size:12px;color:var(--dd-base-400);font-family:monospace;text-align:center}.icon-tag{font-size:11px;color:var(--dd-base-600);font-family:monospace;background:var(--dd-base-200);padding:4px 8px;border-radius:4px;margin-top:8px;text-align:center;border:1px solid var(--dd-base-300)}.copy-hint{position:absolute;bottom:8px;right:8px;font-size:10px;color:var(--dd-base-500);background:var(--dd-base-0);border:1px solid var(--dd-base-200);padding:2px 6px;border-radius:4px;pointer-events:none}.pagination-controls{display:flex;justify-content:space-around;align-items:center}\n"], dependencies: [{ kind: "component", type: DuckDevInput, selector: "duck-dev-input", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "errorMessage"] }, { kind: "component", type: ButtonFlip, selector: "duck-dev-button-flip", inputs: ["text", "disabled", "arrowIndex", "direction", "colorButton"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
2112
2104
  }
2113
2105
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSvgBlock, decorators: [{
2114
2106
  type: Component,
2115
- args: [{ selector: 'app-duck-dev-svg-block', imports: [TranslocoPipe, DuckDevInput, ButtonFlip], template: "<div class=\"demo-container\">\n <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'svgComponent.description' | transloco }}</h2>\n <p class=\"description\">\n {{ 'svgComponent.descriptionText' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n\n <div class=\"icons-toolbar\">\n <duck-dev-input\n [form]=\"searchForm\"\n controlName=\"search\"\n [placeholder]=\"'svgComponent.searchPlaceholder' | transloco\"\n type=\"text\"\n />\n <div class=\"icons-stats\">\n Page {{ page() }} / {{ totalPages() }} \u2022\n Showing\n {{ (paginatedIcons().length === 0) ? 0 : ((page() - 1) * pageSize + 1) }}\u2013\n {{ ((page() - 1) * pageSize) + paginatedIcons().length }}\n of {{ filteredIcons().length }}\n </div>\n </div>\n\n @if (filteredIcons().length === 0) {\n <p>No icons found.</p>\n } @else {\n <div class=\"icons-showcase\">\n @for (icon of paginatedIcons(); track icon.id) {\n <div class=\"icon-card\" (click)=\"copyTag(icon.id)\" role=\"button\" tabindex=\"0\">\n <div class=\"icon-display\" [innerHTML]=\"getSafeHtml(icon.svg)\"></div>\n <div class=\"icon-name\">{{ icon.name }}</div>\n <div class=\"icon-id\">{{ icon.id }}</div>\n <code class=\"icon-tag\" [title]=\"(copiedId() === icon.id) ? ('svgComponent.copied' | transloco) : ('svgComponent.clickToCopy' | transloco)\">&lt;{{ icon.id }}&gt;</code>\n <div class=\"copy-hint\">{{ (copiedId() === icon.id) ? ('svgComponent.copied' | transloco) : ('svgComponent.clickToCopy' | transloco) }}</div>\n </div>\n }\n </div>\n\n <div class=\"pagination-controls\">\n <duck-dev-button-flip [text]=\"'Prev'\" (click)=\"prevPage()\" [direction]=\"'previous'\"></duck-dev-button-flip>\n <span>Page {{ page() }} of {{ totalPages() }}</span>\n <duck-dev-button-flip [text]=\"'Next'\" (click)=\"nextPage()\"></duck-dev-button-flip>\n </div>\n }\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n <ol>\n <li>{{ 'svgComponent.step1' | transloco }}</li>\n <li>{{ 'svgComponent.step2' | transloco }}</li>\n <li>{{ 'svgComponent.step3' | transloco }}</li>\n </ol>\n </div>\n </section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}.component-section{margin-bottom:40px}.component-section h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}.component-section h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.component-section .description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-200);border-radius:8px;transition:all .3s ease;cursor:pointer}.icon-card:hover{border-color:var(--dd-base-200);background:var(--dd-base-50);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.icon-card:hover .icon-display{transform:scale(1.1);color:var(--dd-base-0)}.icon-display{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--dd-base-0);transition:all .3s ease}.icon-display ::ng-deep svg{width:100%;height:100%;fill:currentColor}.icon-name{font-size:14px;font-weight:500;color:var(--dd-base-600);margin-bottom:4px;text-align:center}.icon-id{font-size:12px;color:var(--dd-base-400);font-family:monospace;text-align:center}.icon-tag{font-size:11px;color:var(--dd-base-600);font-family:monospace;background:var(--dd-base-200);padding:4px 8px;border-radius:4px;margin-top:8px;text-align:center;border:1px solid var(--dd-base-300)}.copy-hint{position:absolute;bottom:8px;right:8px;font-size:10px;color:var(--dd-base-500);background:var(--dd-base-0);border:1px solid var(--dd-base-200);padding:2px 6px;border-radius:4px;pointer-events:none}.pagination-controls{display:flex;justify-content:space-around;align-items:center}\n"] }]
2107
+ args: [{ selector: 'app-duck-dev-svg-block', imports: [TranslocoPipe, DuckDevInput, ButtonFlip], template: "<div class=\"demo-container\">\n <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'svgComponent.description' | transloco }}</h2>\n <p class=\"description\">\n {{ 'svgComponent.descriptionText' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n\n <div class=\"icons-toolbar\">\n <duck-dev-input\n [form]=\"searchForm\"\n controlName=\"search\"\n [placeholder]=\"'svgComponent.searchPlaceholder' | transloco\"\n type=\"text\"\n />\n <div class=\"icons-stats\">\n Page {{ page() }} / {{ totalPages() }} \u2022 Showing\n {{ paginatedIcons().length === 0 ? 0 : (page() - 1) * pageSize + 1 }}\u2013\n {{ (page() - 1) * pageSize + paginatedIcons().length }}\n of {{ filteredIcons().length }}\n </div>\n </div>\n\n @if (filteredIcons().length === 0) {\n <p>No icons found.</p>\n } @else {\n <div class=\"icons-showcase\">\n @for (icon of paginatedIcons(); track icon.id) {\n <div class=\"icon-card\" (click)=\"copyTag(icon.id)\" role=\"button\" tabindex=\"0\">\n <div class=\"icon-display\" [innerHTML]=\"getSafeHtml(icon.svg)\"></div>\n <div class=\"icon-name\">{{ icon.name }}</div>\n <div class=\"icon-id\">{{ icon.id }}</div>\n <code\n class=\"icon-tag\"\n [title]=\"\n copiedId() === icon.id\n ? ('svgComponent.copied' | transloco)\n : ('svgComponent.clickToCopy' | transloco)\n \"\n >&lt;{{ icon.id }}&gt;</code\n >\n <div class=\"copy-hint\">\n {{\n copiedId() === icon.id\n ? ('svgComponent.copied' | transloco)\n : ('svgComponent.clickToCopy' | transloco)\n }}\n </div>\n </div>\n }\n </div>\n\n <div class=\"pagination-controls\">\n <duck-dev-button-flip\n [text]=\"'Prev'\"\n (click)=\"prevPage()\"\n [direction]=\"'previous'\"\n ></duck-dev-button-flip>\n <span>Page {{ page() }} of {{ totalPages() }}</span>\n <duck-dev-button-flip [text]=\"'Next'\" (click)=\"nextPage()\"></duck-dev-button-flip>\n </div>\n }\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n <ol>\n <li>{{ 'svgComponent.step1' | transloco }}</li>\n <li>{{ 'svgComponent.step2' | transloco }}</li>\n <li>{{ 'svgComponent.step3' | transloco }}</li>\n </ol>\n </div>\n </section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}.component-section{margin-bottom:40px}.component-section h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}.component-section h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.component-section .description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-200);border-radius:8px;transition:all .3s ease;cursor:pointer}.icon-card:hover{border-color:var(--dd-base-200);background:var(--dd-base-50);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.icon-card:hover .icon-display{transform:scale(1.1);color:var(--dd-base-0)}.icon-display{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--dd-base-0);transition:all .3s ease}.icon-display ::ng-deep svg{width:100%;height:100%;fill:currentColor}.icon-name{font-size:14px;font-weight:500;color:var(--dd-base-600);margin-bottom:4px;text-align:center}.icon-id{font-size:12px;color:var(--dd-base-400);font-family:monospace;text-align:center}.icon-tag{font-size:11px;color:var(--dd-base-600);font-family:monospace;background:var(--dd-base-200);padding:4px 8px;border-radius:4px;margin-top:8px;text-align:center;border:1px solid var(--dd-base-300)}.copy-hint{position:absolute;bottom:8px;right:8px;font-size:10px;color:var(--dd-base-500);background:var(--dd-base-0);border:1px solid var(--dd-base-200);padding:2px 6px;border-radius:4px;pointer-events:none}.pagination-controls{display:flex;justify-content:space-around;align-items:center}\n"] }]
2116
2108
  }], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: i1.FormBuilder }] });
2117
2109
 
2118
2110
  class InputBlock {
2119
2111
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
2120
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: InputBlock, isStandalone: true, selector: "app-input-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'inputComponent.title' | transloco }}</h1>\n\n <!-- Input Field Component -->\n <section class=\"component-section\">\n <h2>{{ 'inputComponent.inputField.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'inputComponent.inputField.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'inputComponent.inputField.usage' | transloco }}</h3>\n <p>{{ 'inputComponent.inputField.usageText1' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText2' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'inputComponent.inputField.inputs' | transloco }}</h3>\n <ul>\n <li><strong>form</strong> ({{ 'inputComponent.inputField.required' | transloco }}) - {{ 'inputComponent.inputField.inputForm' | transloco }}</li>\n <li><strong>controlName</strong> ({{ 'inputComponent.inputField.required' | transloco }}) - {{ 'inputComponent.inputField.inputControlName' | transloco }}</li>\n <li><strong>label</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputLabel' | transloco }}</li>\n <li><strong>placeholder</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputPlaceholder' | transloco }}</li>\n <li><strong>type</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputType' | transloco }}</li>\n <li><strong>formInputType</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputFormInputType' | transloco }}\n <ul>\n <li>'input' - {{ 'inputComponent.inputField.typeInput' | transloco }}</li>\n <li>'textarea' - {{ 'inputComponent.inputField.typeTextarea' | transloco }}</li>\n <li>'checkbox' - {{ 'inputComponent.inputField.typeCheckbox' | transloco }}</li>\n </ul>\n </li>\n <li><strong>errorMessage</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputErrorMessage' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'inputComponent.inputField.features' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.feature1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature6' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'inputComponent.inputField.api' | transloco }}</h3>\n <ul>\n <li><strong>form: FormGroup</strong> - {{ 'inputComponent.inputField.apiForm' | transloco }}</li>\n <li><strong>controlName: string</strong> - {{ 'inputComponent.inputField.apiControlName' | transloco }}</li>\n <li><strong>label?: string</strong> - {{ 'inputComponent.inputField.apiLabel' | transloco }}</li>\n <li><strong>placeholder?: string</strong> - {{ 'inputComponent.inputField.apiPlaceholder' | transloco }}</li>\n <li><strong>type?: string</strong> - {{ 'inputComponent.inputField.apiType' | transloco }}</li>\n <li><strong>formInputType?: 'input' | 'textarea' | 'checkbox'</strong> - {{ 'inputComponent.inputField.apiFormInputType' | transloco }}</li>\n <li><strong>errorMessage?: string</strong> - {{ 'inputComponent.inputField.apiErrorMessage' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'inputComponent.inputField.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.implementation1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation6' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'inputComponent.inputField.example' | transloco }}</h3>\n <div class=\"example-wrapper\">\n <h4>{{ 'inputComponent.inputField.exampleComponent' | transloco }}</h4>\n <pre><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; FormBuilder, FormGroup, Validators &#125; from '&#64;angular/forms';\nimport &#123; InputFieldComponent &#125; from './input-field.component';\n\n &#64;Component(&#123;\n selector: 'app-example',\n imports: [InputFieldComponent],\n template: `\n &lt;form [formGroup]=\"exampleForm\"&gt;\n &lt;!-- Text Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"username\"\n label=\"Username\"\n placeholder=\"Enter your username\"\n [errorMessage]=\"getUsernameError()\"\n /&gt;\n\n &lt;!-- Email Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"email\"\n label=\"Email\"\n type=\"email\"\n placeholder=\"example&#64;mail.com\"\n [errorMessage]=\"getEmailError()\"\n /&gt;\n\n &lt;!-- Password Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"password\"\n label=\"Password\"\n type=\"password\"\n placeholder=\"Enter password\"\n [errorMessage]=\"getPasswordError()\"\n /&gt;\n\n &lt;!-- Textarea --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"description\"\n label=\"Description\"\n formInputType=\"textarea\"\n placeholder=\"Enter description\"\n /&gt;\n\n &lt;!-- Checkbox --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"agree\"\n label=\"Agreement\"\n formInputType=\"checkbox\"\n &gt;\n I agree to the terms and conditions\n &lt;/dd-input-field&gt;\n &lt;/form&gt;\n `\n&#125;)\nexport class ExampleComponent &#123;\n exampleForm: FormGroup;\n\n constructor(private fb: FormBuilder) &#123;\n this.exampleForm = this.fb.group(&#123;\n username: ['', [Validators.required, Validators.minLength(3)]],\n email: ['', [Validators.required, Validators.email]],\n password: ['', [Validators.required, Validators.minLength(8)]],\n description: [''],\n agree: [false, Validators.requiredTrue]\n &#125;);\n &#125;\n\n getUsernameError(): string &#123;\n const control = this.exampleForm.get('username');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Username is required';\n &#125;\n if (control?.hasError('minlength') && control?.touched) &#123;\n return 'Username must be at least 3 characters';\n &#125;\n return '';\n &#125;\n\n getEmailError(): string &#123;\n const control = this.exampleForm.get('email');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Email is required';\n &#125;\n if (control?.hasError('email') && control?.touched) &#123;\n return 'Invalid email format';\n &#125;\n return '';\n &#125;\n\n getPasswordError(): string &#123;\n const control = this.exampleForm.get('password');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Password is required';\n &#125;\n if (control?.hasError('minlength') && control?.touched) &#123;\n return 'Password must be at least 8 characters';\n &#125;\n return '';\n &#125;\n&#125;</code></pre>\n </div>\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block,.demo-container .component-section .example-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p,.demo-container .component-section .example-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul,.demo-container .component-section .example-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li,.demo-container .component-section .example-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong,.demo-container .component-section .example-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul,.demo-container .component-section .example-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li,.demo-container .component-section .example-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}.demo-container .component-section .example-block .example-wrapper{margin-top:15px}.demo-container .component-section .example-block .example-wrapper h4{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px}.demo-container .component-section .example-block .example-wrapper pre{background:var(--dd-base-100);border:1px solid var(--dd-base-300);border-radius:8px;padding:20px;overflow-x:auto}.demo-container .component-section .example-block .example-wrapper pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6;color:var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .example-block .example-wrapper pre{padding:15px}.demo-container .component-section .example-block .example-wrapper pre code{font-size:12px}}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
2112
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: InputBlock, isStandalone: true, selector: "app-input-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'inputComponent.title' | transloco }}</h1>\n\n <!-- Input Field Component -->\n <section class=\"component-section\">\n <h2>{{ 'inputComponent.inputField.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'inputComponent.inputField.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'inputComponent.inputField.usage' | transloco }}</h3>\n <p>{{ 'inputComponent.inputField.usageText1' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText2' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'inputComponent.inputField.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>form</strong> ({{ 'inputComponent.inputField.required' | transloco }}) -\n {{ 'inputComponent.inputField.inputForm' | transloco }}\n </li>\n <li>\n <strong>controlName</strong> ({{ 'inputComponent.inputField.required' | transloco }}) -\n {{ 'inputComponent.inputField.inputControlName' | transloco }}\n </li>\n <li>\n <strong>label</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputLabel' | transloco }}\n </li>\n <li>\n <strong>placeholder</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputPlaceholder' | transloco }}\n </li>\n <li>\n <strong>type</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputType' | transloco }}\n </li>\n <li>\n <strong>formInputType</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputFormInputType' | transloco }}\n <ul>\n <li>'input' - {{ 'inputComponent.inputField.typeInput' | transloco }}</li>\n <li>'textarea' - {{ 'inputComponent.inputField.typeTextarea' | transloco }}</li>\n <li>'checkbox' - {{ 'inputComponent.inputField.typeCheckbox' | transloco }}</li>\n </ul>\n </li>\n <li>\n <strong>errorMessage</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputErrorMessage' | transloco }}\n </li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'inputComponent.inputField.features' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.feature1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature6' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'inputComponent.inputField.api' | transloco }}</h3>\n <ul>\n <li>\n <strong>form: FormGroup</strong> - {{ 'inputComponent.inputField.apiForm' | transloco }}\n </li>\n <li>\n <strong>controlName: string</strong> -\n {{ 'inputComponent.inputField.apiControlName' | transloco }}\n </li>\n <li>\n <strong>label?: string</strong> - {{ 'inputComponent.inputField.apiLabel' | transloco }}\n </li>\n <li>\n <strong>placeholder?: string</strong> -\n {{ 'inputComponent.inputField.apiPlaceholder' | transloco }}\n </li>\n <li>\n <strong>type?: string</strong> - {{ 'inputComponent.inputField.apiType' | transloco }}\n </li>\n <li>\n <strong>formInputType?: 'input' | 'textarea' | 'checkbox'</strong> -\n {{ 'inputComponent.inputField.apiFormInputType' | transloco }}\n </li>\n <li>\n <strong>errorMessage?: string</strong> -\n {{ 'inputComponent.inputField.apiErrorMessage' | transloco }}\n </li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'inputComponent.inputField.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.implementation1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation6' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'inputComponent.inputField.example' | transloco }}</h3>\n <div class=\"example-wrapper\">\n <h4>{{ 'inputComponent.inputField.exampleComponent' | transloco }}</h4>\n <pre><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; FormBuilder, FormGroup, Validators &#125; from '&#64;angular/forms';\nimport &#123; InputFieldComponent &#125; from './input-field.component';\n\n &#64;Component(&#123;\n selector: 'app-example',\n imports: [InputFieldComponent],\n template: `\n &lt;form [formGroup]=\"exampleForm\"&gt;\n &lt;!-- Text Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"username\"\n label=\"Username\"\n placeholder=\"Enter your username\"\n [errorMessage]=\"getUsernameError()\"\n /&gt;\n\n &lt;!-- Email Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"email\"\n label=\"Email\"\n type=\"email\"\n placeholder=\"example&#64;mail.com\"\n [errorMessage]=\"getEmailError()\"\n /&gt;\n\n &lt;!-- Password Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"password\"\n label=\"Password\"\n type=\"password\"\n placeholder=\"Enter password\"\n [errorMessage]=\"getPasswordError()\"\n /&gt;\n\n &lt;!-- Textarea --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"description\"\n label=\"Description\"\n formInputType=\"textarea\"\n placeholder=\"Enter description\"\n /&gt;\n\n &lt;!-- Checkbox --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"agree\"\n label=\"Agreement\"\n formInputType=\"checkbox\"\n &gt;\n I agree to the terms and conditions\n &lt;/dd-input-field&gt;\n &lt;/form&gt;\n `\n&#125;)\nexport class ExampleComponent &#123;\n exampleForm: FormGroup;\n\n constructor(private fb: FormBuilder) &#123;\n this.exampleForm = this.fb.group(&#123;\n username: ['', [Validators.required, Validators.minLength(3)]],\n email: ['', [Validators.required, Validators.email]],\n password: ['', [Validators.required, Validators.minLength(8)]],\n description: [''],\n agree: [false, Validators.requiredTrue]\n &#125;);\n &#125;\n\n getUsernameError(): string &#123;\n const control = this.exampleForm.get('username');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Username is required';\n &#125;\n if (control?.hasError('minlength') && control?.touched) &#123;\n return 'Username must be at least 3 characters';\n &#125;\n return '';\n &#125;\n\n getEmailError(): string &#123;\n const control = this.exampleForm.get('email');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Email is required';\n &#125;\n if (control?.hasError('email') && control?.touched) &#123;\n return 'Invalid email format';\n &#125;\n return '';\n &#125;\n\n getPasswordError(): string &#123;\n const control = this.exampleForm.get('password');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Password is required';\n &#125;\n if (control?.hasError('minlength') && control?.touched) &#123;\n return 'Password must be at least 8 characters';\n &#125;\n return '';\n &#125;\n&#125;</code></pre>\n </div>\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block,.demo-container .component-section .example-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p,.demo-container .component-section .example-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul,.demo-container .component-section .example-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li,.demo-container .component-section .example-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong,.demo-container .component-section .example-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul,.demo-container .component-section .example-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li,.demo-container .component-section .example-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}.demo-container .component-section .example-block .example-wrapper{margin-top:15px}.demo-container .component-section .example-block .example-wrapper h4{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px}.demo-container .component-section .example-block .example-wrapper pre{background:var(--dd-base-100);border:1px solid var(--dd-base-300);border-radius:8px;padding:20px;overflow-x:auto}.demo-container .component-section .example-block .example-wrapper pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6;color:var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .example-block .example-wrapper pre{padding:15px}.demo-container .component-section .example-block .example-wrapper pre code{font-size:12px}}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
2121
2113
  }
2122
2114
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputBlock, decorators: [{
2123
2115
  type: Component,
2124
- args: [{ selector: 'app-input-block', imports: [
2125
- TranslocoPipe
2126
- ], template: "<div class=\"demo-container\">\n <h1>{{ 'inputComponent.title' | transloco }}</h1>\n\n <!-- Input Field Component -->\n <section class=\"component-section\">\n <h2>{{ 'inputComponent.inputField.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'inputComponent.inputField.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'inputComponent.inputField.usage' | transloco }}</h3>\n <p>{{ 'inputComponent.inputField.usageText1' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText2' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'inputComponent.inputField.inputs' | transloco }}</h3>\n <ul>\n <li><strong>form</strong> ({{ 'inputComponent.inputField.required' | transloco }}) - {{ 'inputComponent.inputField.inputForm' | transloco }}</li>\n <li><strong>controlName</strong> ({{ 'inputComponent.inputField.required' | transloco }}) - {{ 'inputComponent.inputField.inputControlName' | transloco }}</li>\n <li><strong>label</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputLabel' | transloco }}</li>\n <li><strong>placeholder</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputPlaceholder' | transloco }}</li>\n <li><strong>type</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputType' | transloco }}</li>\n <li><strong>formInputType</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputFormInputType' | transloco }}\n <ul>\n <li>'input' - {{ 'inputComponent.inputField.typeInput' | transloco }}</li>\n <li>'textarea' - {{ 'inputComponent.inputField.typeTextarea' | transloco }}</li>\n <li>'checkbox' - {{ 'inputComponent.inputField.typeCheckbox' | transloco }}</li>\n </ul>\n </li>\n <li><strong>errorMessage</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputErrorMessage' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'inputComponent.inputField.features' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.feature1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature6' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'inputComponent.inputField.api' | transloco }}</h3>\n <ul>\n <li><strong>form: FormGroup</strong> - {{ 'inputComponent.inputField.apiForm' | transloco }}</li>\n <li><strong>controlName: string</strong> - {{ 'inputComponent.inputField.apiControlName' | transloco }}</li>\n <li><strong>label?: string</strong> - {{ 'inputComponent.inputField.apiLabel' | transloco }}</li>\n <li><strong>placeholder?: string</strong> - {{ 'inputComponent.inputField.apiPlaceholder' | transloco }}</li>\n <li><strong>type?: string</strong> - {{ 'inputComponent.inputField.apiType' | transloco }}</li>\n <li><strong>formInputType?: 'input' | 'textarea' | 'checkbox'</strong> - {{ 'inputComponent.inputField.apiFormInputType' | transloco }}</li>\n <li><strong>errorMessage?: string</strong> - {{ 'inputComponent.inputField.apiErrorMessage' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'inputComponent.inputField.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.implementation1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation6' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'inputComponent.inputField.example' | transloco }}</h3>\n <div class=\"example-wrapper\">\n <h4>{{ 'inputComponent.inputField.exampleComponent' | transloco }}</h4>\n <pre><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; FormBuilder, FormGroup, Validators &#125; from '&#64;angular/forms';\nimport &#123; InputFieldComponent &#125; from './input-field.component';\n\n &#64;Component(&#123;\n selector: 'app-example',\n imports: [InputFieldComponent],\n template: `\n &lt;form [formGroup]=\"exampleForm\"&gt;\n &lt;!-- Text Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"username\"\n label=\"Username\"\n placeholder=\"Enter your username\"\n [errorMessage]=\"getUsernameError()\"\n /&gt;\n\n &lt;!-- Email Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"email\"\n label=\"Email\"\n type=\"email\"\n placeholder=\"example&#64;mail.com\"\n [errorMessage]=\"getEmailError()\"\n /&gt;\n\n &lt;!-- Password Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"password\"\n label=\"Password\"\n type=\"password\"\n placeholder=\"Enter password\"\n [errorMessage]=\"getPasswordError()\"\n /&gt;\n\n &lt;!-- Textarea --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"description\"\n label=\"Description\"\n formInputType=\"textarea\"\n placeholder=\"Enter description\"\n /&gt;\n\n &lt;!-- Checkbox --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"agree\"\n label=\"Agreement\"\n formInputType=\"checkbox\"\n &gt;\n I agree to the terms and conditions\n &lt;/dd-input-field&gt;\n &lt;/form&gt;\n `\n&#125;)\nexport class ExampleComponent &#123;\n exampleForm: FormGroup;\n\n constructor(private fb: FormBuilder) &#123;\n this.exampleForm = this.fb.group(&#123;\n username: ['', [Validators.required, Validators.minLength(3)]],\n email: ['', [Validators.required, Validators.email]],\n password: ['', [Validators.required, Validators.minLength(8)]],\n description: [''],\n agree: [false, Validators.requiredTrue]\n &#125;);\n &#125;\n\n getUsernameError(): string &#123;\n const control = this.exampleForm.get('username');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Username is required';\n &#125;\n if (control?.hasError('minlength') && control?.touched) &#123;\n return 'Username must be at least 3 characters';\n &#125;\n return '';\n &#125;\n\n getEmailError(): string &#123;\n const control = this.exampleForm.get('email');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Email is required';\n &#125;\n if (control?.hasError('email') && control?.touched) &#123;\n return 'Invalid email format';\n &#125;\n return '';\n &#125;\n\n getPasswordError(): string &#123;\n const control = this.exampleForm.get('password');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Password is required';\n &#125;\n if (control?.hasError('minlength') && control?.touched) &#123;\n return 'Password must be at least 8 characters';\n &#125;\n return '';\n &#125;\n&#125;</code></pre>\n </div>\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block,.demo-container .component-section .example-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p,.demo-container .component-section .example-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul,.demo-container .component-section .example-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li,.demo-container .component-section .example-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong,.demo-container .component-section .example-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul,.demo-container .component-section .example-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li,.demo-container .component-section .example-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}.demo-container .component-section .example-block .example-wrapper{margin-top:15px}.demo-container .component-section .example-block .example-wrapper h4{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px}.demo-container .component-section .example-block .example-wrapper pre{background:var(--dd-base-100);border:1px solid var(--dd-base-300);border-radius:8px;padding:20px;overflow-x:auto}.demo-container .component-section .example-block .example-wrapper pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6;color:var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .example-block .example-wrapper pre{padding:15px}.demo-container .component-section .example-block .example-wrapper pre code{font-size:12px}}\n"] }]
2116
+ args: [{ selector: 'app-input-block', imports: [TranslocoPipe], template: "<div class=\"demo-container\">\n <h1>{{ 'inputComponent.title' | transloco }}</h1>\n\n <!-- Input Field Component -->\n <section class=\"component-section\">\n <h2>{{ 'inputComponent.inputField.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'inputComponent.inputField.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'inputComponent.inputField.usage' | transloco }}</h3>\n <p>{{ 'inputComponent.inputField.usageText1' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText2' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'inputComponent.inputField.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>form</strong> ({{ 'inputComponent.inputField.required' | transloco }}) -\n {{ 'inputComponent.inputField.inputForm' | transloco }}\n </li>\n <li>\n <strong>controlName</strong> ({{ 'inputComponent.inputField.required' | transloco }}) -\n {{ 'inputComponent.inputField.inputControlName' | transloco }}\n </li>\n <li>\n <strong>label</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputLabel' | transloco }}\n </li>\n <li>\n <strong>placeholder</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputPlaceholder' | transloco }}\n </li>\n <li>\n <strong>type</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputType' | transloco }}\n </li>\n <li>\n <strong>formInputType</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputFormInputType' | transloco }}\n <ul>\n <li>'input' - {{ 'inputComponent.inputField.typeInput' | transloco }}</li>\n <li>'textarea' - {{ 'inputComponent.inputField.typeTextarea' | transloco }}</li>\n <li>'checkbox' - {{ 'inputComponent.inputField.typeCheckbox' | transloco }}</li>\n </ul>\n </li>\n <li>\n <strong>errorMessage</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputErrorMessage' | transloco }}\n </li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'inputComponent.inputField.features' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.feature1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature6' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'inputComponent.inputField.api' | transloco }}</h3>\n <ul>\n <li>\n <strong>form: FormGroup</strong> - {{ 'inputComponent.inputField.apiForm' | transloco }}\n </li>\n <li>\n <strong>controlName: string</strong> -\n {{ 'inputComponent.inputField.apiControlName' | transloco }}\n </li>\n <li>\n <strong>label?: string</strong> - {{ 'inputComponent.inputField.apiLabel' | transloco }}\n </li>\n <li>\n <strong>placeholder?: string</strong> -\n {{ 'inputComponent.inputField.apiPlaceholder' | transloco }}\n </li>\n <li>\n <strong>type?: string</strong> - {{ 'inputComponent.inputField.apiType' | transloco }}\n </li>\n <li>\n <strong>formInputType?: 'input' | 'textarea' | 'checkbox'</strong> -\n {{ 'inputComponent.inputField.apiFormInputType' | transloco }}\n </li>\n <li>\n <strong>errorMessage?: string</strong> -\n {{ 'inputComponent.inputField.apiErrorMessage' | transloco }}\n </li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'inputComponent.inputField.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.implementation1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation6' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'inputComponent.inputField.example' | transloco }}</h3>\n <div class=\"example-wrapper\">\n <h4>{{ 'inputComponent.inputField.exampleComponent' | transloco }}</h4>\n <pre><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; FormBuilder, FormGroup, Validators &#125; from '&#64;angular/forms';\nimport &#123; InputFieldComponent &#125; from './input-field.component';\n\n &#64;Component(&#123;\n selector: 'app-example',\n imports: [InputFieldComponent],\n template: `\n &lt;form [formGroup]=\"exampleForm\"&gt;\n &lt;!-- Text Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"username\"\n label=\"Username\"\n placeholder=\"Enter your username\"\n [errorMessage]=\"getUsernameError()\"\n /&gt;\n\n &lt;!-- Email Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"email\"\n label=\"Email\"\n type=\"email\"\n placeholder=\"example&#64;mail.com\"\n [errorMessage]=\"getEmailError()\"\n /&gt;\n\n &lt;!-- Password Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"password\"\n label=\"Password\"\n type=\"password\"\n placeholder=\"Enter password\"\n [errorMessage]=\"getPasswordError()\"\n /&gt;\n\n &lt;!-- Textarea --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"description\"\n label=\"Description\"\n formInputType=\"textarea\"\n placeholder=\"Enter description\"\n /&gt;\n\n &lt;!-- Checkbox --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"agree\"\n label=\"Agreement\"\n formInputType=\"checkbox\"\n &gt;\n I agree to the terms and conditions\n &lt;/dd-input-field&gt;\n &lt;/form&gt;\n `\n&#125;)\nexport class ExampleComponent &#123;\n exampleForm: FormGroup;\n\n constructor(private fb: FormBuilder) &#123;\n this.exampleForm = this.fb.group(&#123;\n username: ['', [Validators.required, Validators.minLength(3)]],\n email: ['', [Validators.required, Validators.email]],\n password: ['', [Validators.required, Validators.minLength(8)]],\n description: [''],\n agree: [false, Validators.requiredTrue]\n &#125;);\n &#125;\n\n getUsernameError(): string &#123;\n const control = this.exampleForm.get('username');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Username is required';\n &#125;\n if (control?.hasError('minlength') && control?.touched) &#123;\n return 'Username must be at least 3 characters';\n &#125;\n return '';\n &#125;\n\n getEmailError(): string &#123;\n const control = this.exampleForm.get('email');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Email is required';\n &#125;\n if (control?.hasError('email') && control?.touched) &#123;\n return 'Invalid email format';\n &#125;\n return '';\n &#125;\n\n getPasswordError(): string &#123;\n const control = this.exampleForm.get('password');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Password is required';\n &#125;\n if (control?.hasError('minlength') && control?.touched) &#123;\n return 'Password must be at least 8 characters';\n &#125;\n return '';\n &#125;\n&#125;</code></pre>\n </div>\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block,.demo-container .component-section .example-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p,.demo-container .component-section .example-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul,.demo-container .component-section .example-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li,.demo-container .component-section .example-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong,.demo-container .component-section .example-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul,.demo-container .component-section .example-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li,.demo-container .component-section .example-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}.demo-container .component-section .example-block .example-wrapper{margin-top:15px}.demo-container .component-section .example-block .example-wrapper h4{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px}.demo-container .component-section .example-block .example-wrapper pre{background:var(--dd-base-100);border:1px solid var(--dd-base-300);border-radius:8px;padding:20px;overflow-x:auto}.demo-container .component-section .example-block .example-wrapper pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6;color:var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .example-block .example-wrapper pre{padding:15px}.demo-container .component-section .example-block .example-wrapper pre code{font-size:12px}}\n"] }]
2127
2117
  }] });
2128
2118
 
2129
2119
  class NotificationBlock {
@@ -2135,35 +2125,57 @@ class NotificationBlock {
2135
2125
  this.notify.success('All changes have been saved.', { title: 'Success', position: 'top' });
2136
2126
  }
2137
2127
  warningCenter() {
2138
- this.notify.warning('Check the entered data.', { title: 'Warning', position: 'center', duration: 0 });
2128
+ this.notify.warning('Check the entered data.', {
2129
+ title: 'Warning',
2130
+ position: 'center',
2131
+ duration: 0,
2132
+ });
2139
2133
  }
2140
2134
  errorBottom() {
2141
2135
  this.notify.error('Something went wrong.', { title: 'Error', position: 'bottom' });
2142
2136
  }
2143
2137
  // Additional demos
2144
2138
  showTop() {
2145
- this.notify.show({ message: 'Generic info message', title: 'Info', position: 'top', duration: 2500, type: 'success' });
2139
+ this.notify.show({
2140
+ message: 'Generic info message',
2141
+ title: 'Info',
2142
+ position: 'top',
2143
+ duration: 2500,
2144
+ type: 'success',
2145
+ });
2146
2146
  }
2147
2147
  showCenterNoAuto() {
2148
- this.notify.show({ message: 'This will stay until you click it', title: 'Manual close', position: 'center', duration: 0, type: 'warning' });
2148
+ this.notify.show({
2149
+ message: 'This will stay until you click it',
2150
+ title: 'Manual close',
2151
+ position: 'center',
2152
+ duration: 0,
2153
+ type: 'warning',
2154
+ });
2149
2155
  }
2150
2156
  showBottomLong() {
2151
- this.notify.show({ message: 'Takes a bit longer to disappear', title: 'Longer duration', position: 'bottom', duration: 6000, type: 'success' });
2157
+ this.notify.show({
2158
+ message: 'Takes a bit longer to disappear',
2159
+ title: 'Longer duration',
2160
+ position: 'bottom',
2161
+ duration: 6000,
2162
+ type: 'success',
2163
+ });
2152
2164
  }
2153
2165
  clearAll() {
2154
2166
  this.notify.clear();
2155
2167
  }
2156
2168
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NotificationBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
2157
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: NotificationBlock, isStandalone: true, selector: "app-notification-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'notifications.title' | transloco }}</h1>\n\n <!-- Quick demo -->\n <div class=\"example-row quick-actions\">\n <button class=\"demo-btn\" (click)=\"showSample()\">{{ 'notifications.quickDemo' | transloco }}</button>\n <button class=\"demo-btn\" (click)=\"clearAll()\">{{ 'notifications.clearAll' | transloco }}</button>\n </div>\n\n <!-- Basics -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'notifications.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'notifications.basic.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-notification-container /&gt;\n\n// In your component:\nconstructor(private notify: DuckDevNotificationService) &#123;&#125;\n\nonSave() &#123;\n this.notify.success('Saved successfully', &#123; title: 'Done', position: 'top', duration: 3000 &#125;);\n&#125;\n</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'notifications.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>type</strong> - {{ 'notifications.basic.inputType' | transloco }}</li>\n <li><strong>title</strong> - {{ 'notifications.basic.inputTitle' | transloco }}</li>\n <li><strong>message</strong> - {{ 'notifications.basic.inputMessage' | transloco }}</li>\n <li><strong>duration</strong> - {{ 'notifications.basic.inputDuration' | transloco }}</li>\n <li><strong>position</strong> - {{ 'notifications.basic.inputPosition' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'notifications.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <button class=\"demo-btn\" (click)=\"successTop()\">{{ 'notifications.examples.successTop' | transloco }}</button>\n <button class=\"demo-btn\" (click)=\"warningCenter()\">{{ 'notifications.examples.warningCenter' | transloco }}</button>\n <button class=\"demo-btn\" (click)=\"errorBottom()\">{{ 'notifications.examples.errorBottom' | transloco }}</button>\n </div>\n </div>\n </section>\n\n <!-- Service and Container -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.service.title' | transloco }}</h2>\n <p class=\"description\">{{ 'notifications.service.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'notifications.service.install' | transloco }}</h3>\n <pre><code>// 1) Place container once in app layout (e.g., AppComponent template)\n&lt;duck-dev-notification-container /&gt;\n\n// 2) Inject and use the service in any component\nconstructor(private notify: DuckDevNotificationService) &#123;&#125;\n\nthis.notify.show(&#123;\n type: 'success',\n title: '{{ 'notifications.snippets.titleSuccess' | transloco }}',\n message: '{{ 'notifications.snippets.sampleMessage' | transloco }}',\n position: 'top',\n duration: 3000\n&#125;);\n</code></pre>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'notifications.api.title' | transloco }}</h3>\n <ul class=\"api-list\">\n <li><code>show(options: NotificationOptions)</code> \u2014 {{ 'notifications.api.show' | transloco }}</li>\n <li><code>success(message, options?)</code> \u2014 {{ 'notifications.api.success' | transloco }}</li>\n <li><code>warning(message, options?)</code> \u2014 {{ 'notifications.api.warning' | transloco }}</li>\n <li><code>error(message, options?)</code> \u2014 {{ 'notifications.api.error' | transloco }}</li>\n <li><code>remove(id)</code> \u2014 {{ 'notifications.api.remove' | transloco }}</li>\n <li><code>clear()</code> \u2014 {{ 'notifications.api.clear' | transloco }}</li>\n </ul>\n <h4>{{ 'notifications.api.optionsTitle' | transloco }}</h4>\n <pre><code>interface NotificationOptions &#123;\n type?: 'success' | 'warning' | 'error';\n title?: string;\n message: string;\n position?: 'top' | 'center' | 'bottom';\n duration?: number; // {{ 'notifications.api.durationHint' | transloco }}\n&#125;</code></pre>\n </div>\n </section>\n\n <!-- Positions & duration examples -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.positions.title' | transloco }}</h2>\n <p class=\"description\">{{ 'notifications.positions.description' | transloco }}</p>\n <div class=\"examples-block\">\n <div class=\"example-row\">\n <button class=\"demo-btn\" (click)=\"showTop()\">{{ 'notifications.positions.top' | transloco }}</button>\n <button class=\"demo-btn\" (click)=\"showCenterNoAuto()\">{{ 'notifications.positions.centerNoAuto' | transloco }}</button>\n <button class=\"demo-btn\" (click)=\"showBottomLong()\">{{ 'notifications.positions.bottomLong' | transloco }}</button>\n </div>\n </div>\n <p class=\"tip\">{{ 'notifications.tip.clickToClose' | transloco }}</p>\n </section>\n\n <!-- Advanced -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.advanced.title' | transloco }}</h2>\n <ul>\n <li>{{ 'notifications.advanced.cssOnly' | transloco }}</li>\n <li>{{ 'notifications.advanced.palette' | transloco }}</li>\n <li>{{ 'notifications.advanced.stacking' | transloco }}</li>\n <li>{{ 'notifications.advanced.accessibility' | transloco }}</li>\n </ul>\n </section>\n\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .api-block{margin-bottom:25px}.demo-container .component-section .api-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .api-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .api-block .api-list{list-style:none;padding:0;margin:0 0 12px}.demo-container .component-section .api-block .api-list li{padding:8px 12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);border-radius:6px;color:var(--dd-base-500);font-size:14px}.demo-container .component-section .api-block .api-list li+li{margin-top:8px}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .quick-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .tip{margin-top:8px;color:var(--dd-base-400)}.demo-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease,border-color .2s ease}.demo-btn:hover{background:var(--dd-base-200);border-color:var(--dd-base-accent-blue);box-shadow:0 1px #00000008}.demo-btn:active{transform:translateY(1px)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}}\n"], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }] });
2169
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: NotificationBlock, isStandalone: true, selector: "app-notification-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'notifications.title' | transloco }}</h1>\n\n <!-- Quick demo -->\n <div class=\"example-row quick-actions\">\n <button class=\"demo-btn\" (click)=\"showSample()\">\n {{ 'notifications.quickDemo' | transloco }}\n </button>\n <button class=\"demo-btn\" (click)=\"clearAll()\">\n {{ 'notifications.clearAll' | transloco }}\n </button>\n </div>\n\n <!-- Basics -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'notifications.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'notifications.basic.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-notification-container /&gt;\n\n// In your component:\nconstructor(private notify: DuckDevNotificationService) &#123;&#125;\n\nonSave() &#123;\n this.notify.success('Saved successfully', &#123; title: 'Done', position: 'top', duration: 3000 &#125;);\n&#125;\n</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'notifications.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>type</strong> - {{ 'notifications.basic.inputType' | transloco }}</li>\n <li><strong>title</strong> - {{ 'notifications.basic.inputTitle' | transloco }}</li>\n <li><strong>message</strong> - {{ 'notifications.basic.inputMessage' | transloco }}</li>\n <li><strong>duration</strong> - {{ 'notifications.basic.inputDuration' | transloco }}</li>\n <li><strong>position</strong> - {{ 'notifications.basic.inputPosition' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'notifications.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <button class=\"demo-btn\" (click)=\"successTop()\">\n {{ 'notifications.examples.successTop' | transloco }}\n </button>\n <button class=\"demo-btn\" (click)=\"warningCenter()\">\n {{ 'notifications.examples.warningCenter' | transloco }}\n </button>\n <button class=\"demo-btn\" (click)=\"errorBottom()\">\n {{ 'notifications.examples.errorBottom' | transloco }}\n </button>\n </div>\n </div>\n </section>\n\n <!-- Service and Container -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.service.title' | transloco }}</h2>\n <p class=\"description\">{{ 'notifications.service.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'notifications.service.install' | transloco }}</h3>\n <pre><code>// 1) Place container once in app layout (e.g., AppComponent template)\n&lt;duck-dev-notification-container /&gt;\n\n// 2) Inject and use the service in any component\nconstructor(private notify: DuckDevNotificationService) &#123;&#125;\n\nthis.notify.show(&#123;\n type: 'success',\n title: '{{ 'notifications.snippets.titleSuccess' | transloco }}',\n message: '{{ 'notifications.snippets.sampleMessage' | transloco }}',\n position: 'top',\n duration: 3000\n&#125;);\n</code></pre>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'notifications.api.title' | transloco }}</h3>\n <ul class=\"api-list\">\n <li>\n <code>show(options: NotificationOptions)</code> \u2014\n {{ 'notifications.api.show' | transloco }}\n </li>\n <li>\n <code>success(message, options?)</code> \u2014 {{ 'notifications.api.success' | transloco }}\n </li>\n <li>\n <code>warning(message, options?)</code> \u2014 {{ 'notifications.api.warning' | transloco }}\n </li>\n <li><code>error(message, options?)</code> \u2014 {{ 'notifications.api.error' | transloco }}</li>\n <li><code>remove(id)</code> \u2014 {{ 'notifications.api.remove' | transloco }}</li>\n <li><code>clear()</code> \u2014 {{ 'notifications.api.clear' | transloco }}</li>\n </ul>\n <h4>{{ 'notifications.api.optionsTitle' | transloco }}</h4>\n <pre><code>interface NotificationOptions &#123;\n type?: 'success' | 'warning' | 'error';\n title?: string;\n message: string;\n position?: 'top' | 'center' | 'bottom';\n duration?: number; // {{ 'notifications.api.durationHint' | transloco }}\n&#125;</code></pre>\n </div>\n </section>\n\n <!-- Positions & duration examples -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.positions.title' | transloco }}</h2>\n <p class=\"description\">{{ 'notifications.positions.description' | transloco }}</p>\n <div class=\"examples-block\">\n <div class=\"example-row\">\n <button class=\"demo-btn\" (click)=\"showTop()\">\n {{ 'notifications.positions.top' | transloco }}\n </button>\n <button class=\"demo-btn\" (click)=\"showCenterNoAuto()\">\n {{ 'notifications.positions.centerNoAuto' | transloco }}\n </button>\n <button class=\"demo-btn\" (click)=\"showBottomLong()\">\n {{ 'notifications.positions.bottomLong' | transloco }}\n </button>\n </div>\n </div>\n <p class=\"tip\">{{ 'notifications.tip.clickToClose' | transloco }}</p>\n </section>\n\n <!-- Advanced -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.advanced.title' | transloco }}</h2>\n <ul>\n <li>{{ 'notifications.advanced.cssOnly' | transloco }}</li>\n <li>{{ 'notifications.advanced.palette' | transloco }}</li>\n <li>{{ 'notifications.advanced.stacking' | transloco }}</li>\n <li>{{ 'notifications.advanced.accessibility' | transloco }}</li>\n </ul>\n </section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .api-block{margin-bottom:25px}.demo-container .component-section .api-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .api-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .api-block .api-list{list-style:none;padding:0;margin:0 0 12px}.demo-container .component-section .api-block .api-list li{padding:8px 12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);border-radius:6px;color:var(--dd-base-500);font-size:14px}.demo-container .component-section .api-block .api-list li+li{margin-top:8px}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .quick-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .tip{margin-top:8px;color:var(--dd-base-400)}.demo-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease,border-color .2s ease}.demo-btn:hover{background:var(--dd-base-200);border-color:var(--dd-base-accent-blue);box-shadow:0 1px #00000008}.demo-btn:active{transform:translateY(1px)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}}\n"], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }] });
2158
2170
  }
2159
2171
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NotificationBlock, decorators: [{
2160
2172
  type: Component,
2161
- args: [{ selector: 'app-notification-block', imports: [TranslocoModule], template: "<div class=\"demo-container\">\n <h1>{{ 'notifications.title' | transloco }}</h1>\n\n <!-- Quick demo -->\n <div class=\"example-row quick-actions\">\n <button class=\"demo-btn\" (click)=\"showSample()\">{{ 'notifications.quickDemo' | transloco }}</button>\n <button class=\"demo-btn\" (click)=\"clearAll()\">{{ 'notifications.clearAll' | transloco }}</button>\n </div>\n\n <!-- Basics -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'notifications.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'notifications.basic.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-notification-container /&gt;\n\n// In your component:\nconstructor(private notify: DuckDevNotificationService) &#123;&#125;\n\nonSave() &#123;\n this.notify.success('Saved successfully', &#123; title: 'Done', position: 'top', duration: 3000 &#125;);\n&#125;\n</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'notifications.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>type</strong> - {{ 'notifications.basic.inputType' | transloco }}</li>\n <li><strong>title</strong> - {{ 'notifications.basic.inputTitle' | transloco }}</li>\n <li><strong>message</strong> - {{ 'notifications.basic.inputMessage' | transloco }}</li>\n <li><strong>duration</strong> - {{ 'notifications.basic.inputDuration' | transloco }}</li>\n <li><strong>position</strong> - {{ 'notifications.basic.inputPosition' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'notifications.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <button class=\"demo-btn\" (click)=\"successTop()\">{{ 'notifications.examples.successTop' | transloco }}</button>\n <button class=\"demo-btn\" (click)=\"warningCenter()\">{{ 'notifications.examples.warningCenter' | transloco }}</button>\n <button class=\"demo-btn\" (click)=\"errorBottom()\">{{ 'notifications.examples.errorBottom' | transloco }}</button>\n </div>\n </div>\n </section>\n\n <!-- Service and Container -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.service.title' | transloco }}</h2>\n <p class=\"description\">{{ 'notifications.service.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'notifications.service.install' | transloco }}</h3>\n <pre><code>// 1) Place container once in app layout (e.g., AppComponent template)\n&lt;duck-dev-notification-container /&gt;\n\n// 2) Inject and use the service in any component\nconstructor(private notify: DuckDevNotificationService) &#123;&#125;\n\nthis.notify.show(&#123;\n type: 'success',\n title: '{{ 'notifications.snippets.titleSuccess' | transloco }}',\n message: '{{ 'notifications.snippets.sampleMessage' | transloco }}',\n position: 'top',\n duration: 3000\n&#125;);\n</code></pre>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'notifications.api.title' | transloco }}</h3>\n <ul class=\"api-list\">\n <li><code>show(options: NotificationOptions)</code> \u2014 {{ 'notifications.api.show' | transloco }}</li>\n <li><code>success(message, options?)</code> \u2014 {{ 'notifications.api.success' | transloco }}</li>\n <li><code>warning(message, options?)</code> \u2014 {{ 'notifications.api.warning' | transloco }}</li>\n <li><code>error(message, options?)</code> \u2014 {{ 'notifications.api.error' | transloco }}</li>\n <li><code>remove(id)</code> \u2014 {{ 'notifications.api.remove' | transloco }}</li>\n <li><code>clear()</code> \u2014 {{ 'notifications.api.clear' | transloco }}</li>\n </ul>\n <h4>{{ 'notifications.api.optionsTitle' | transloco }}</h4>\n <pre><code>interface NotificationOptions &#123;\n type?: 'success' | 'warning' | 'error';\n title?: string;\n message: string;\n position?: 'top' | 'center' | 'bottom';\n duration?: number; // {{ 'notifications.api.durationHint' | transloco }}\n&#125;</code></pre>\n </div>\n </section>\n\n <!-- Positions & duration examples -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.positions.title' | transloco }}</h2>\n <p class=\"description\">{{ 'notifications.positions.description' | transloco }}</p>\n <div class=\"examples-block\">\n <div class=\"example-row\">\n <button class=\"demo-btn\" (click)=\"showTop()\">{{ 'notifications.positions.top' | transloco }}</button>\n <button class=\"demo-btn\" (click)=\"showCenterNoAuto()\">{{ 'notifications.positions.centerNoAuto' | transloco }}</button>\n <button class=\"demo-btn\" (click)=\"showBottomLong()\">{{ 'notifications.positions.bottomLong' | transloco }}</button>\n </div>\n </div>\n <p class=\"tip\">{{ 'notifications.tip.clickToClose' | transloco }}</p>\n </section>\n\n <!-- Advanced -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.advanced.title' | transloco }}</h2>\n <ul>\n <li>{{ 'notifications.advanced.cssOnly' | transloco }}</li>\n <li>{{ 'notifications.advanced.palette' | transloco }}</li>\n <li>{{ 'notifications.advanced.stacking' | transloco }}</li>\n <li>{{ 'notifications.advanced.accessibility' | transloco }}</li>\n </ul>\n </section>\n\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .api-block{margin-bottom:25px}.demo-container .component-section .api-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .api-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .api-block .api-list{list-style:none;padding:0;margin:0 0 12px}.demo-container .component-section .api-block .api-list li{padding:8px 12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);border-radius:6px;color:var(--dd-base-500);font-size:14px}.demo-container .component-section .api-block .api-list li+li{margin-top:8px}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .quick-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .tip{margin-top:8px;color:var(--dd-base-400)}.demo-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease,border-color .2s ease}.demo-btn:hover{background:var(--dd-base-200);border-color:var(--dd-base-accent-blue);box-shadow:0 1px #00000008}.demo-btn:active{transform:translateY(1px)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}}\n"] }]
2173
+ args: [{ selector: 'app-notification-block', imports: [TranslocoModule], template: "<div class=\"demo-container\">\n <h1>{{ 'notifications.title' | transloco }}</h1>\n\n <!-- Quick demo -->\n <div class=\"example-row quick-actions\">\n <button class=\"demo-btn\" (click)=\"showSample()\">\n {{ 'notifications.quickDemo' | transloco }}\n </button>\n <button class=\"demo-btn\" (click)=\"clearAll()\">\n {{ 'notifications.clearAll' | transloco }}\n </button>\n </div>\n\n <!-- Basics -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'notifications.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'notifications.basic.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-notification-container /&gt;\n\n// In your component:\nconstructor(private notify: DuckDevNotificationService) &#123;&#125;\n\nonSave() &#123;\n this.notify.success('Saved successfully', &#123; title: 'Done', position: 'top', duration: 3000 &#125;);\n&#125;\n</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'notifications.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>type</strong> - {{ 'notifications.basic.inputType' | transloco }}</li>\n <li><strong>title</strong> - {{ 'notifications.basic.inputTitle' | transloco }}</li>\n <li><strong>message</strong> - {{ 'notifications.basic.inputMessage' | transloco }}</li>\n <li><strong>duration</strong> - {{ 'notifications.basic.inputDuration' | transloco }}</li>\n <li><strong>position</strong> - {{ 'notifications.basic.inputPosition' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'notifications.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <button class=\"demo-btn\" (click)=\"successTop()\">\n {{ 'notifications.examples.successTop' | transloco }}\n </button>\n <button class=\"demo-btn\" (click)=\"warningCenter()\">\n {{ 'notifications.examples.warningCenter' | transloco }}\n </button>\n <button class=\"demo-btn\" (click)=\"errorBottom()\">\n {{ 'notifications.examples.errorBottom' | transloco }}\n </button>\n </div>\n </div>\n </section>\n\n <!-- Service and Container -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.service.title' | transloco }}</h2>\n <p class=\"description\">{{ 'notifications.service.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'notifications.service.install' | transloco }}</h3>\n <pre><code>// 1) Place container once in app layout (e.g., AppComponent template)\n&lt;duck-dev-notification-container /&gt;\n\n// 2) Inject and use the service in any component\nconstructor(private notify: DuckDevNotificationService) &#123;&#125;\n\nthis.notify.show(&#123;\n type: 'success',\n title: '{{ 'notifications.snippets.titleSuccess' | transloco }}',\n message: '{{ 'notifications.snippets.sampleMessage' | transloco }}',\n position: 'top',\n duration: 3000\n&#125;);\n</code></pre>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'notifications.api.title' | transloco }}</h3>\n <ul class=\"api-list\">\n <li>\n <code>show(options: NotificationOptions)</code> \u2014\n {{ 'notifications.api.show' | transloco }}\n </li>\n <li>\n <code>success(message, options?)</code> \u2014 {{ 'notifications.api.success' | transloco }}\n </li>\n <li>\n <code>warning(message, options?)</code> \u2014 {{ 'notifications.api.warning' | transloco }}\n </li>\n <li><code>error(message, options?)</code> \u2014 {{ 'notifications.api.error' | transloco }}</li>\n <li><code>remove(id)</code> \u2014 {{ 'notifications.api.remove' | transloco }}</li>\n <li><code>clear()</code> \u2014 {{ 'notifications.api.clear' | transloco }}</li>\n </ul>\n <h4>{{ 'notifications.api.optionsTitle' | transloco }}</h4>\n <pre><code>interface NotificationOptions &#123;\n type?: 'success' | 'warning' | 'error';\n title?: string;\n message: string;\n position?: 'top' | 'center' | 'bottom';\n duration?: number; // {{ 'notifications.api.durationHint' | transloco }}\n&#125;</code></pre>\n </div>\n </section>\n\n <!-- Positions & duration examples -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.positions.title' | transloco }}</h2>\n <p class=\"description\">{{ 'notifications.positions.description' | transloco }}</p>\n <div class=\"examples-block\">\n <div class=\"example-row\">\n <button class=\"demo-btn\" (click)=\"showTop()\">\n {{ 'notifications.positions.top' | transloco }}\n </button>\n <button class=\"demo-btn\" (click)=\"showCenterNoAuto()\">\n {{ 'notifications.positions.centerNoAuto' | transloco }}\n </button>\n <button class=\"demo-btn\" (click)=\"showBottomLong()\">\n {{ 'notifications.positions.bottomLong' | transloco }}\n </button>\n </div>\n </div>\n <p class=\"tip\">{{ 'notifications.tip.clickToClose' | transloco }}</p>\n </section>\n\n <!-- Advanced -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.advanced.title' | transloco }}</h2>\n <ul>\n <li>{{ 'notifications.advanced.cssOnly' | transloco }}</li>\n <li>{{ 'notifications.advanced.palette' | transloco }}</li>\n <li>{{ 'notifications.advanced.stacking' | transloco }}</li>\n <li>{{ 'notifications.advanced.accessibility' | transloco }}</li>\n </ul>\n </section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .api-block{margin-bottom:25px}.demo-container .component-section .api-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .api-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .api-block .api-list{list-style:none;padding:0;margin:0 0 12px}.demo-container .component-section .api-block .api-list li{padding:8px 12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);border-radius:6px;color:var(--dd-base-500);font-size:14px}.demo-container .component-section .api-block .api-list li+li{margin-top:8px}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .quick-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .tip{margin-top:8px;color:var(--dd-base-400)}.demo-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease,border-color .2s ease}.demo-btn:hover{background:var(--dd-base-200);border-color:var(--dd-base-accent-blue);box-shadow:0 1px #00000008}.demo-btn:active{transform:translateY(1px)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}}\n"] }]
2162
2174
  }] });
2163
2175
 
2164
2176
  class DuckDevIcon {
2165
2177
  sanitizer;
2166
- static iconMap = new Map(svgIcons.map(i => [i.id, i.svg]));
2178
+ static iconMap = new Map(svgIcons.map((i) => [i.id, i.svg]));
2167
2179
  name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}) });
2168
2180
  constructor(sanitizer) {
2169
2181
  this.sanitizer = sanitizer;
@@ -2174,15 +2186,11 @@ class DuckDevIcon {
2174
2186
  return this.sanitizer.bypassSecurityTrustHtml(svg);
2175
2187
  }, { ...(ngDevMode ? { debugName: "svgHtml" } : {}) });
2176
2188
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevIcon, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
2177
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevIcon, isStandalone: true, selector: "duck-dev-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
2178
- <span class="duck-dev-icon" [innerHTML]="svgHtml()"></span>
2179
- `, isInline: true, styles: [":host{display:inline-flex;line-height:0}.duck-dev-icon{display:inline-flex}\n"] });
2189
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevIcon, isStandalone: true, selector: "duck-dev-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ` <span class="duck-dev-icon" [innerHTML]="svgHtml()"></span> `, isInline: true, styles: [":host{display:inline-flex;line-height:0}.duck-dev-icon{display:inline-flex}\n"] });
2180
2190
  }
2181
2191
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevIcon, decorators: [{
2182
2192
  type: Component,
2183
- args: [{ selector: 'duck-dev-icon', standalone: true, template: `
2184
- <span class="duck-dev-icon" [innerHTML]="svgHtml()"></span>
2185
- `, styles: [":host{display:inline-flex;line-height:0}.duck-dev-icon{display:inline-flex}\n"] }]
2193
+ args: [{ selector: 'duck-dev-icon', standalone: true, template: ` <span class="duck-dev-icon" [innerHTML]="svgHtml()"></span> `, styles: [":host{display:inline-flex;line-height:0}.duck-dev-icon{display:inline-flex}\n"] }]
2186
2194
  }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
2187
2195
 
2188
2196
  class DuckDevNotification {
@@ -2220,11 +2228,11 @@ class DuckDevNotification {
2220
2228
  }
2221
2229
  }
2222
2230
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevNotification, deps: [], target: i0.ɵɵFactoryTarget.Component });
2223
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevNotification, isStandalone: true, selector: "duck-dev-notification", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (isVisible()) {\n <div\n [class]=\"'notification notification--' + type() + ' notification--pos-' + position() + ' notification--' + state()\"\n (click)=\"close()\">\n <div class=\"notification__inner\">\n <div class=\"notification__icon\">\n <span>@switch (type()){\n @case('success'){\n <duck-dev-icon name=\"duck-dev-check\"></duck-dev-icon>\n }\n @case ('warning'){\n <duck-dev-icon name=\"duck-dev-alert-triangle\"></duck-dev-icon>\n }\n @case ('error'){\n <duck-dev-icon name=\"duck-dev-alert-circle\"></duck-dev-icon>\n }\n }</span>\n </div>\n <div class=\"notification__content\">\n <h4 class=\"notification__title\">{{ title() }}</h4>\n <p class=\"notification__message\">{{ message() }}</p>\n </div>\n <button\n class=\"notification__close\"\n (click)=\"close()\"\n type=\"button\"\n aria-label=\"\u0417\u0430\u043A\u0440\u044B\u0442\u044C\">\n \u00D7\n </button>\n </div>\n </div>\n}\n", styles: [".notification{position:fixed;right:20px;min-width:320px;max-width:500px;padding:16px;border-radius:8px;box-shadow:0 4px 12px #00000026;display:block;gap:12px;cursor:pointer;z-index:3;transform:translateY(-8px);transition:transform .3s ease}.notification__inner{display:flex;align-items:flex-start;gap:12px;will-change:transform;transform:scale(.96)}@keyframes dd-spring-pop{0%{transform:scale(.86)}40%{transform:scale(1.1)}65%{transform:scale(.98)}to{transform:scale(1)}}.notification--enter .notification__inner{animation:dd-spring-pop .48s cubic-bezier(.2,.8,.2,1.2) both}@keyframes dd-spring-pop-out{0%{transform:scale(1)}25%{transform:scale(1.04)}55%{transform:scale(.9)}80%{transform:scale(.96)}to{transform:scale(.92)}}.notification--leave .notification__inner{animation:dd-spring-pop-out .32s cubic-bezier(.3,.7,.4,1) both}.notification--pos-top{top:20px}.notification--pos-center{left:50%;top:50%;right:auto;transform:translate(-50%,-50%) scale(.8)}.notification--pos-bottom{bottom:20px}.notification--enter.notification--pos-top{transform:translateY(0)}.notification--leave.notification--pos-top{transform:translateY(-8px)}.notification--enter.notification--pos-bottom{transform:translateY(0)}.notification--leave.notification--pos-bottom{transform:translateY(8px)}.notification--enter.notification--pos-center{transform:translate(-50%,-50%) scale(1)}.notification--leave.notification--pos-center{transform:translate(-50%,-50%) scale(.8)}.notification--success{background:var(--dd-base-success)}.notification--warning{background:var(--dd-base-accent-yellow);color:var(--dd-base-600)}.notification--error{background:var(--dd-base-accent-orange);color:var(--dd-base-600)}.notification__icon{font-size:24px;font-weight:700;flex-shrink:0}.notification__content{flex:1}.notification__title{margin:0 0 4px;font-size:16px;font-weight:600;color:var(--dd-base-600)}.notification__message{margin:0;font-size:14px}.notification__close{background:none;border:none;color:inherit;font-size:24px;line-height:1;cursor:pointer;padding:0;width:24px;height:24px;flex-shrink:0;opacity:.7;transition:opacity .2s}.notification__close:hover{opacity:1}\n"], dependencies: [{ kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }] });
2231
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevNotification, isStandalone: true, selector: "duck-dev-notification", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (isVisible()) {\n <div\n [class]=\"\n 'notification notification--' +\n type() +\n ' notification--pos-' +\n position() +\n ' notification--' +\n state()\n \"\n (click)=\"close()\"\n >\n <div class=\"notification__inner\">\n <div class=\"notification__icon\">\n <span>\n @switch (type()) {\n @case ('success') {\n <duck-dev-icon name=\"duck-dev-check\"></duck-dev-icon>\n }\n @case ('warning') {\n <duck-dev-icon name=\"duck-dev-alert-triangle\"></duck-dev-icon>\n }\n @case ('error') {\n <duck-dev-icon name=\"duck-dev-alert-circle\"></duck-dev-icon>\n }\n }\n </span>\n </div>\n <div class=\"notification__content\">\n <h4 class=\"notification__title\">{{ title() }}</h4>\n <p class=\"notification__message\">{{ message() }}</p>\n </div>\n <button class=\"notification__close\" (click)=\"close()\" type=\"button\" aria-label=\"\u0417\u0430\u043A\u0440\u044B\u0442\u044C\">\n \u00D7\n </button>\n </div>\n </div>\n}\n", styles: [".notification{position:fixed;right:20px;min-width:320px;max-width:500px;padding:16px;border-radius:8px;box-shadow:0 4px 12px #00000026;display:block;gap:12px;cursor:pointer;z-index:3;transform:translateY(-8px);transition:transform .3s ease}.notification__inner{display:flex;align-items:flex-start;gap:12px;will-change:transform;transform:scale(.96)}@keyframes dd-spring-pop{0%{transform:scale(.86)}40%{transform:scale(1.1)}65%{transform:scale(.98)}to{transform:scale(1)}}.notification--enter .notification__inner{animation:dd-spring-pop .48s cubic-bezier(.2,.8,.2,1.2) both}@keyframes dd-spring-pop-out{0%{transform:scale(1)}25%{transform:scale(1.04)}55%{transform:scale(.9)}80%{transform:scale(.96)}to{transform:scale(.92)}}.notification--leave .notification__inner{animation:dd-spring-pop-out .32s cubic-bezier(.3,.7,.4,1) both}.notification--pos-top{top:20px}.notification--pos-center{left:50%;top:50%;right:auto;transform:translate(-50%,-50%) scale(.8)}.notification--pos-bottom{bottom:20px}.notification--enter.notification--pos-top{transform:translateY(0)}.notification--leave.notification--pos-top{transform:translateY(-8px)}.notification--enter.notification--pos-bottom{transform:translateY(0)}.notification--leave.notification--pos-bottom{transform:translateY(8px)}.notification--enter.notification--pos-center{transform:translate(-50%,-50%) scale(1)}.notification--leave.notification--pos-center{transform:translate(-50%,-50%) scale(.8)}.notification--success{background:var(--dd-base-success)}.notification--warning{background:var(--dd-base-accent-yellow);color:var(--dd-base-600)}.notification--error{background:var(--dd-base-accent-orange);color:var(--dd-base-600)}.notification__icon{font-size:24px;font-weight:700;flex-shrink:0}.notification__content{flex:1}.notification__title{margin:0 0 4px;font-size:16px;font-weight:600;color:var(--dd-base-600)}.notification__message{margin:0;font-size:14px}.notification__close{background:none;border:none;color:inherit;font-size:24px;line-height:1;cursor:pointer;padding:0;width:24px;height:24px;flex-shrink:0;opacity:.7;transition:opacity .2s}.notification__close:hover{opacity:1}\n"], dependencies: [{ kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }] });
2224
2232
  }
2225
2233
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevNotification, decorators: [{
2226
2234
  type: Component,
2227
- args: [{ selector: 'duck-dev-notification', imports: [DuckDevIcon], template: "@if (isVisible()) {\n <div\n [class]=\"'notification notification--' + type() + ' notification--pos-' + position() + ' notification--' + state()\"\n (click)=\"close()\">\n <div class=\"notification__inner\">\n <div class=\"notification__icon\">\n <span>@switch (type()){\n @case('success'){\n <duck-dev-icon name=\"duck-dev-check\"></duck-dev-icon>\n }\n @case ('warning'){\n <duck-dev-icon name=\"duck-dev-alert-triangle\"></duck-dev-icon>\n }\n @case ('error'){\n <duck-dev-icon name=\"duck-dev-alert-circle\"></duck-dev-icon>\n }\n }</span>\n </div>\n <div class=\"notification__content\">\n <h4 class=\"notification__title\">{{ title() }}</h4>\n <p class=\"notification__message\">{{ message() }}</p>\n </div>\n <button\n class=\"notification__close\"\n (click)=\"close()\"\n type=\"button\"\n aria-label=\"\u0417\u0430\u043A\u0440\u044B\u0442\u044C\">\n \u00D7\n </button>\n </div>\n </div>\n}\n", styles: [".notification{position:fixed;right:20px;min-width:320px;max-width:500px;padding:16px;border-radius:8px;box-shadow:0 4px 12px #00000026;display:block;gap:12px;cursor:pointer;z-index:3;transform:translateY(-8px);transition:transform .3s ease}.notification__inner{display:flex;align-items:flex-start;gap:12px;will-change:transform;transform:scale(.96)}@keyframes dd-spring-pop{0%{transform:scale(.86)}40%{transform:scale(1.1)}65%{transform:scale(.98)}to{transform:scale(1)}}.notification--enter .notification__inner{animation:dd-spring-pop .48s cubic-bezier(.2,.8,.2,1.2) both}@keyframes dd-spring-pop-out{0%{transform:scale(1)}25%{transform:scale(1.04)}55%{transform:scale(.9)}80%{transform:scale(.96)}to{transform:scale(.92)}}.notification--leave .notification__inner{animation:dd-spring-pop-out .32s cubic-bezier(.3,.7,.4,1) both}.notification--pos-top{top:20px}.notification--pos-center{left:50%;top:50%;right:auto;transform:translate(-50%,-50%) scale(.8)}.notification--pos-bottom{bottom:20px}.notification--enter.notification--pos-top{transform:translateY(0)}.notification--leave.notification--pos-top{transform:translateY(-8px)}.notification--enter.notification--pos-bottom{transform:translateY(0)}.notification--leave.notification--pos-bottom{transform:translateY(8px)}.notification--enter.notification--pos-center{transform:translate(-50%,-50%) scale(1)}.notification--leave.notification--pos-center{transform:translate(-50%,-50%) scale(.8)}.notification--success{background:var(--dd-base-success)}.notification--warning{background:var(--dd-base-accent-yellow);color:var(--dd-base-600)}.notification--error{background:var(--dd-base-accent-orange);color:var(--dd-base-600)}.notification__icon{font-size:24px;font-weight:700;flex-shrink:0}.notification__content{flex:1}.notification__title{margin:0 0 4px;font-size:16px;font-weight:600;color:var(--dd-base-600)}.notification__message{margin:0;font-size:14px}.notification__close{background:none;border:none;color:inherit;font-size:24px;line-height:1;cursor:pointer;padding:0;width:24px;height:24px;flex-shrink:0;opacity:.7;transition:opacity .2s}.notification__close:hover{opacity:1}\n"] }]
2235
+ args: [{ selector: 'duck-dev-notification', imports: [DuckDevIcon], template: "@if (isVisible()) {\n <div\n [class]=\"\n 'notification notification--' +\n type() +\n ' notification--pos-' +\n position() +\n ' notification--' +\n state()\n \"\n (click)=\"close()\"\n >\n <div class=\"notification__inner\">\n <div class=\"notification__icon\">\n <span>\n @switch (type()) {\n @case ('success') {\n <duck-dev-icon name=\"duck-dev-check\"></duck-dev-icon>\n }\n @case ('warning') {\n <duck-dev-icon name=\"duck-dev-alert-triangle\"></duck-dev-icon>\n }\n @case ('error') {\n <duck-dev-icon name=\"duck-dev-alert-circle\"></duck-dev-icon>\n }\n }\n </span>\n </div>\n <div class=\"notification__content\">\n <h4 class=\"notification__title\">{{ title() }}</h4>\n <p class=\"notification__message\">{{ message() }}</p>\n </div>\n <button class=\"notification__close\" (click)=\"close()\" type=\"button\" aria-label=\"\u0417\u0430\u043A\u0440\u044B\u0442\u044C\">\n \u00D7\n </button>\n </div>\n </div>\n}\n", styles: [".notification{position:fixed;right:20px;min-width:320px;max-width:500px;padding:16px;border-radius:8px;box-shadow:0 4px 12px #00000026;display:block;gap:12px;cursor:pointer;z-index:3;transform:translateY(-8px);transition:transform .3s ease}.notification__inner{display:flex;align-items:flex-start;gap:12px;will-change:transform;transform:scale(.96)}@keyframes dd-spring-pop{0%{transform:scale(.86)}40%{transform:scale(1.1)}65%{transform:scale(.98)}to{transform:scale(1)}}.notification--enter .notification__inner{animation:dd-spring-pop .48s cubic-bezier(.2,.8,.2,1.2) both}@keyframes dd-spring-pop-out{0%{transform:scale(1)}25%{transform:scale(1.04)}55%{transform:scale(.9)}80%{transform:scale(.96)}to{transform:scale(.92)}}.notification--leave .notification__inner{animation:dd-spring-pop-out .32s cubic-bezier(.3,.7,.4,1) both}.notification--pos-top{top:20px}.notification--pos-center{left:50%;top:50%;right:auto;transform:translate(-50%,-50%) scale(.8)}.notification--pos-bottom{bottom:20px}.notification--enter.notification--pos-top{transform:translateY(0)}.notification--leave.notification--pos-top{transform:translateY(-8px)}.notification--enter.notification--pos-bottom{transform:translateY(0)}.notification--leave.notification--pos-bottom{transform:translateY(8px)}.notification--enter.notification--pos-center{transform:translate(-50%,-50%) scale(1)}.notification--leave.notification--pos-center{transform:translate(-50%,-50%) scale(.8)}.notification--success{background:var(--dd-base-success)}.notification--warning{background:var(--dd-base-accent-yellow);color:var(--dd-base-600)}.notification--error{background:var(--dd-base-accent-orange);color:var(--dd-base-600)}.notification__icon{font-size:24px;font-weight:700;flex-shrink:0}.notification__content{flex:1}.notification__title{margin:0 0 4px;font-size:16px;font-weight:600;color:var(--dd-base-600)}.notification__message{margin:0;font-size:14px}.notification__close{background:none;border:none;color:inherit;font-size:24px;line-height:1;cursor:pointer;padding:0;width:24px;height:24px;flex-shrink:0;opacity:.7;transition:opacity .2s}.notification__close:hover{opacity:1}\n"] }]
2228
2236
  }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
2229
2237
 
2230
2238
  class DuckDevNotificationContainer {
@@ -2291,78 +2299,285 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
2291
2299
 
2292
2300
  class Badge {
2293
2301
  text = input('', { ...(ngDevMode ? { debugName: "text" } : {}) });
2294
- color = input(ButtonEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
2302
+ color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
2295
2303
  variant = input('solid', { ...(ngDevMode ? { debugName: "variant" } : {}) });
2296
2304
  size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
2297
2305
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Badge, deps: [], target: i0.ɵɵFactoryTarget.Component });
2298
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: Badge, isStandalone: true, selector: "dd-badge", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"8\">\n <span\n class=\"dd-badge\"\n [attr.data-variant]=\"variant()\"\n [attr.data-color]=\"color()\"\n [attr.data-size]=\"size()\"\n >\n {{ text() }}\n </span>\n</div>\n", styles: [":host{display:block}.dd-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:600;border-radius:9999px;line-height:1;border:1px solid transparent;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color .2s ease,color .2s ease,border-color .2s ease}.dd-badge[data-size=sm]{font-size:12px;padding:4px 8px;gap:6px}.dd-badge[data-size=md]{font-size:14px;padding:6px 10px;gap:8px}.dd-badge[data-variant=solid][data-color=violet]{background:var(--dd-base-accent-blue);color:var(--dd-base-0)}.dd-badge[data-variant=solid][data-color=orange]{background:var(--dd-base-accent-orange);color:var(--dd-base-0)}.dd-badge[data-variant=solid][data-color=gray]{background:var(--dd-base-200);color:var(--dd-base-600)}.dd-badge[data-variant=solid][data-color=dark]{background:var(--dd-base-700);color:var(--dd-base-0)}.dd-badge[data-variant=solid][data-color=white]{background:var(--dd-base-0);color:var(--dd-base-600);border-color:var(--dd-base-300)}.dd-badge[data-variant=soft][data-color=violet]{background:color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent);color:var(--dd-base-accent-blue);border-color:color-mix(in srgb,var(--dd-base-accent-blue) 30%,transparent)}.dd-badge[data-variant=soft][data-color=orange]{background:color-mix(in srgb,var(--dd-base-accent-orange) 14%,transparent);color:var(--dd-base-accent-orange);border-color:color-mix(in srgb,var(--dd-base-accent-orange) 30%,transparent)}.dd-badge[data-variant=soft][data-color=gray]{background:var(--dd-base-100);color:var(--dd-base-600);border-color:var(--dd-base-300)}.dd-badge[data-variant=soft][data-color=dark]{background:var(--dd-base-200);color:var(--dd-base-700);border-color:var(--dd-base-400)}.dd-badge[data-variant=soft][data-color=white]{background:var(--dd-base-0);color:var(--dd-base-600);border-color:var(--dd-base-300)}.dd-badge[data-variant=outline]{background:transparent}.dd-badge[data-variant=outline][data-color=violet]{color:var(--dd-base-accent-blue);border-color:var(--dd-base-accent-blue)}.dd-badge[data-variant=outline][data-color=orange]{color:var(--dd-base-accent-orange);border-color:var(--dd-base-accent-orange)}.dd-badge[data-variant=outline][data-color=gray]{color:var(--dd-base-600);border-color:var(--dd-base-400)}.dd-badge[data-variant=outline][data-color=dark]{color:var(--dd-base-700);border-color:var(--dd-base-600)}.dd-badge[data-variant=outline][data-color=white]{color:var(--dd-base-600);border-color:var(--dd-base-300)}\n"], dependencies: [{ kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap"] }] });
2306
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: Badge, isStandalone: true, selector: "dd-badge", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"8\">\n <span\n class=\"dd-badge\"\n [attr.data-variant]=\"variant()\"\n [attr.data-color]=\"color()\"\n [attr.data-size]=\"size()\"\n >\n {{ text() }}\n </span>\n</div>\n", styles: [":host{display:block}.dd-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:600;border-radius:9999px;line-height:1;border:1px solid transparent;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color .2s ease,color .2s ease,border-color .2s ease}.dd-badge[data-size=sm]{font-size:12px;padding:4px 8px;gap:6px}.dd-badge[data-size=md]{font-size:14px;padding:6px 10px;gap:8px}.dd-badge[data-variant=solid][data-color=violet]{background:var(--dd-base-accent-blue);color:var(--dd-base-0)}.dd-badge[data-variant=solid][data-color=orange]{background:var(--dd-base-accent-orange);color:var(--dd-base-0)}.dd-badge[data-variant=solid][data-color=gray]{background:var(--dd-base-200);color:var(--dd-base-600)}.dd-badge[data-variant=solid][data-color=dark]{background:var(--dd-base-700);color:var(--dd-base-0)}.dd-badge[data-variant=solid][data-color=white]{background:var(--dd-base-0);color:var(--dd-base-600);border-color:var(--dd-base-300)}.dd-badge[data-variant=soft][data-color=violet]{background:color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent);color:var(--dd-base-accent-blue);border-color:color-mix(in srgb,var(--dd-base-accent-blue) 30%,transparent)}.dd-badge[data-variant=soft][data-color=orange]{background:color-mix(in srgb,var(--dd-base-accent-orange) 14%,transparent);color:var(--dd-base-accent-orange);border-color:color-mix(in srgb,var(--dd-base-accent-orange) 30%,transparent)}.dd-badge[data-variant=soft][data-color=gray]{background:var(--dd-base-100);color:var(--dd-base-600);border-color:var(--dd-base-300)}.dd-badge[data-variant=soft][data-color=dark]{background:var(--dd-base-200);color:var(--dd-base-700);border-color:var(--dd-base-400)}.dd-badge[data-variant=soft][data-color=white]{background:var(--dd-base-0);color:var(--dd-base-600);border-color:var(--dd-base-300)}.dd-badge[data-variant=outline]{background:transparent}.dd-badge[data-variant=outline][data-color=violet]{color:var(--dd-base-accent-blue);border-color:var(--dd-base-accent-blue)}.dd-badge[data-variant=outline][data-color=orange]{color:var(--dd-base-accent-orange);border-color:var(--dd-base-accent-orange)}.dd-badge[data-variant=outline][data-color=gray]{color:var(--dd-base-600);border-color:var(--dd-base-400)}.dd-badge[data-variant=outline][data-color=dark]{color:var(--dd-base-700);border-color:var(--dd-base-600)}.dd-badge[data-variant=outline][data-color=white]{color:var(--dd-base-600);border-color:var(--dd-base-300)}\n"], dependencies: [{ kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }] });
2299
2307
  }
2300
2308
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Badge, decorators: [{
2301
2309
  type: Component,
2302
- args: [{ selector: 'dd-badge', standalone: true, imports: [
2303
- DdFlexDirectionDirective
2304
- ], template: "<div ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"8\">\n <span\n class=\"dd-badge\"\n [attr.data-variant]=\"variant()\"\n [attr.data-color]=\"color()\"\n [attr.data-size]=\"size()\"\n >\n {{ text() }}\n </span>\n</div>\n", styles: [":host{display:block}.dd-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:600;border-radius:9999px;line-height:1;border:1px solid transparent;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color .2s ease,color .2s ease,border-color .2s ease}.dd-badge[data-size=sm]{font-size:12px;padding:4px 8px;gap:6px}.dd-badge[data-size=md]{font-size:14px;padding:6px 10px;gap:8px}.dd-badge[data-variant=solid][data-color=violet]{background:var(--dd-base-accent-blue);color:var(--dd-base-0)}.dd-badge[data-variant=solid][data-color=orange]{background:var(--dd-base-accent-orange);color:var(--dd-base-0)}.dd-badge[data-variant=solid][data-color=gray]{background:var(--dd-base-200);color:var(--dd-base-600)}.dd-badge[data-variant=solid][data-color=dark]{background:var(--dd-base-700);color:var(--dd-base-0)}.dd-badge[data-variant=solid][data-color=white]{background:var(--dd-base-0);color:var(--dd-base-600);border-color:var(--dd-base-300)}.dd-badge[data-variant=soft][data-color=violet]{background:color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent);color:var(--dd-base-accent-blue);border-color:color-mix(in srgb,var(--dd-base-accent-blue) 30%,transparent)}.dd-badge[data-variant=soft][data-color=orange]{background:color-mix(in srgb,var(--dd-base-accent-orange) 14%,transparent);color:var(--dd-base-accent-orange);border-color:color-mix(in srgb,var(--dd-base-accent-orange) 30%,transparent)}.dd-badge[data-variant=soft][data-color=gray]{background:var(--dd-base-100);color:var(--dd-base-600);border-color:var(--dd-base-300)}.dd-badge[data-variant=soft][data-color=dark]{background:var(--dd-base-200);color:var(--dd-base-700);border-color:var(--dd-base-400)}.dd-badge[data-variant=soft][data-color=white]{background:var(--dd-base-0);color:var(--dd-base-600);border-color:var(--dd-base-300)}.dd-badge[data-variant=outline]{background:transparent}.dd-badge[data-variant=outline][data-color=violet]{color:var(--dd-base-accent-blue);border-color:var(--dd-base-accent-blue)}.dd-badge[data-variant=outline][data-color=orange]{color:var(--dd-base-accent-orange);border-color:var(--dd-base-accent-orange)}.dd-badge[data-variant=outline][data-color=gray]{color:var(--dd-base-600);border-color:var(--dd-base-400)}.dd-badge[data-variant=outline][data-color=dark]{color:var(--dd-base-700);border-color:var(--dd-base-600)}.dd-badge[data-variant=outline][data-color=white]{color:var(--dd-base-600);border-color:var(--dd-base-300)}\n"] }]
2310
+ args: [{ selector: 'dd-badge', standalone: true, imports: [DdFlexDirectionDirective], template: "<div ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"8\">\n <span\n class=\"dd-badge\"\n [attr.data-variant]=\"variant()\"\n [attr.data-color]=\"color()\"\n [attr.data-size]=\"size()\"\n >\n {{ text() }}\n </span>\n</div>\n", styles: [":host{display:block}.dd-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:600;border-radius:9999px;line-height:1;border:1px solid transparent;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color .2s ease,color .2s ease,border-color .2s ease}.dd-badge[data-size=sm]{font-size:12px;padding:4px 8px;gap:6px}.dd-badge[data-size=md]{font-size:14px;padding:6px 10px;gap:8px}.dd-badge[data-variant=solid][data-color=violet]{background:var(--dd-base-accent-blue);color:var(--dd-base-0)}.dd-badge[data-variant=solid][data-color=orange]{background:var(--dd-base-accent-orange);color:var(--dd-base-0)}.dd-badge[data-variant=solid][data-color=gray]{background:var(--dd-base-200);color:var(--dd-base-600)}.dd-badge[data-variant=solid][data-color=dark]{background:var(--dd-base-700);color:var(--dd-base-0)}.dd-badge[data-variant=solid][data-color=white]{background:var(--dd-base-0);color:var(--dd-base-600);border-color:var(--dd-base-300)}.dd-badge[data-variant=soft][data-color=violet]{background:color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent);color:var(--dd-base-accent-blue);border-color:color-mix(in srgb,var(--dd-base-accent-blue) 30%,transparent)}.dd-badge[data-variant=soft][data-color=orange]{background:color-mix(in srgb,var(--dd-base-accent-orange) 14%,transparent);color:var(--dd-base-accent-orange);border-color:color-mix(in srgb,var(--dd-base-accent-orange) 30%,transparent)}.dd-badge[data-variant=soft][data-color=gray]{background:var(--dd-base-100);color:var(--dd-base-600);border-color:var(--dd-base-300)}.dd-badge[data-variant=soft][data-color=dark]{background:var(--dd-base-200);color:var(--dd-base-700);border-color:var(--dd-base-400)}.dd-badge[data-variant=soft][data-color=white]{background:var(--dd-base-0);color:var(--dd-base-600);border-color:var(--dd-base-300)}.dd-badge[data-variant=outline]{background:transparent}.dd-badge[data-variant=outline][data-color=violet]{color:var(--dd-base-accent-blue);border-color:var(--dd-base-accent-blue)}.dd-badge[data-variant=outline][data-color=orange]{color:var(--dd-base-accent-orange);border-color:var(--dd-base-accent-orange)}.dd-badge[data-variant=outline][data-color=gray]{color:var(--dd-base-600);border-color:var(--dd-base-400)}.dd-badge[data-variant=outline][data-color=dark]{color:var(--dd-base-700);border-color:var(--dd-base-600)}.dd-badge[data-variant=outline][data-color=white]{color:var(--dd-base-600);border-color:var(--dd-base-300)}\n"] }]
2305
2311
  }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
2306
2312
 
2313
+ class DuckDevCardAccent {
2314
+ content = input(null, { ...(ngDevMode ? { debugName: "content" } : {}) });
2315
+ color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
2316
+ contentHostRef;
2317
+ cardStyle = computed(() => {
2318
+ const color = this.color();
2319
+ let accent = 'var(--dd-base-accent-blue)';
2320
+ switch (color) {
2321
+ case AccentEnumColor.Violet:
2322
+ accent = 'var(--dd-base-secondary)';
2323
+ break;
2324
+ case AccentEnumColor.Orange:
2325
+ accent = 'var(--dd-base-accent-orange)';
2326
+ break;
2327
+ case AccentEnumColor.White:
2328
+ accent = 'var(--dd-base-300)';
2329
+ break;
2330
+ case AccentEnumColor.Gray:
2331
+ accent = 'var(--dd-base-400)';
2332
+ break;
2333
+ case AccentEnumColor.Dark:
2334
+ accent = 'var(--dd-base-600)';
2335
+ break;
2336
+ }
2337
+ return {
2338
+ '--dd-card-accent-color': accent,
2339
+ };
2340
+ }, { ...(ngDevMode ? { debugName: "cardStyle" } : {}) });
2341
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardAccent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2342
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardAccent, isStandalone: true, selector: "dd-card-accent", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "contentHostRef", first: true, predicate: ["contentHost"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"dd-card-accent\" [ngStyle]=\"cardStyle()\">\n <div #contentHost class=\"dd-card-accent__content\"></div>\n</div>\n", styles: [".dd-card-accent{padding:12px 15px;border-radius:6px;border-left:3px solid var(--dd-card-accent-color);line-height:1.5}.dd-card-accent__content{display:block}.dd-card-accent strong{color:var(--dd-card-accent-color);font-weight:600}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
2343
+ }
2344
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardAccent, decorators: [{
2345
+ type: Component,
2346
+ args: [{ selector: 'dd-card-accent', standalone: true, imports: [NgStyle], template: "<div class=\"dd-card-accent\" [ngStyle]=\"cardStyle()\">\n <div #contentHost class=\"dd-card-accent__content\"></div>\n</div>\n", styles: [".dd-card-accent{padding:12px 15px;border-radius:6px;border-left:3px solid var(--dd-card-accent-color);line-height:1.5}.dd-card-accent__content{display:block}.dd-card-accent strong{color:var(--dd-card-accent-color);font-weight:600}\n"] }]
2347
+ }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], contentHostRef: [{
2348
+ type: ViewChild,
2349
+ args: ['contentHost', { static: true }]
2350
+ }] } });
2351
+
2307
2352
  class BadgeBlock {
2308
- colorViolet = ButtonEnumColor.Violet;
2309
- colorOrange = ButtonEnumColor.Orange;
2310
- colorWhite = ButtonEnumColor.White;
2311
- colorGray = ButtonEnumColor.Gray;
2312
- colorDark = ButtonEnumColor.Dark;
2353
+ t = inject(TranslocoService);
2354
+ colorViolet = AccentEnumColor.Violet;
2355
+ colorOrange = AccentEnumColor.Orange;
2356
+ colorWhite = AccentEnumColor.White;
2357
+ colorGray = AccentEnumColor.Gray;
2358
+ colorDark = AccentEnumColor.Dark;
2359
+ // Card content elements
2360
+ descEl;
2361
+ inputTextEl;
2362
+ inputColorEl;
2363
+ inputVariantEl;
2364
+ inputSizeEl;
2365
+ constructor() {
2366
+ this.descEl = this.createEl(this.t.translate('badgeDoc.description'));
2367
+ this.inputTextEl = this.createEl(this.t.translate('badgeDoc.inputsDesc.text'));
2368
+ this.inputColorEl = this.createEl(this.t.translate('badgeDoc.inputsDesc.color'));
2369
+ this.inputVariantEl = this.createEl(this.t.translate('badgeDoc.inputsDesc.variant'));
2370
+ this.inputSizeEl = this.createEl(this.t.translate('badgeDoc.inputsDesc.size'));
2371
+ }
2372
+ createEl(html) {
2373
+ const el = document.createElement('div');
2374
+ el.innerHTML = html;
2375
+ return el;
2376
+ }
2313
2377
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
2314
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: BadgeBlock, isStandalone: true, selector: "app-badge-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <section class=\"component-section\">\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <p class=\"description\">\n {{ 'badgeDoc.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code>&lt;dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> ({{ 'badgeDoc.required' | transloco }}) \u2013 {{ 'badgeDoc.inputText' | transloco }}</li>\n <li><strong>color</strong> \u2013 {{ 'badgeDoc.inputColor' | transloco }}</li>\n <li><strong>variant</strong> \u2013 {{ 'badgeDoc.inputVariant' | transloco }}</li>\n <li><strong>size</strong> \u2013 {{ 'badgeDoc.inputSize' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item dd-badge{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
2378
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: BadgeBlock, isStandalone: true, selector: "app-badge-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <section class=\"component-section\">\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <dd-card-accent [content]=\"descEl\" [color]=\"colorWhite\"></dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code>&lt;dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [content]=\"inputTextEl\" [color]=\"colorWhite\"></dd-card-accent>\n <dd-card-accent [content]=\"inputColorEl\" [color]=\"colorViolet\"></dd-card-accent>\n <dd-card-accent [content]=\"inputVariantEl\" [color]=\"colorOrange\"></dd-card-accent>\n <dd-card-accent [content]=\"inputSizeEl\" [color]=\"colorGray\"></dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item dd-badge{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["content", "color"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
2315
2379
  }
2316
2380
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, decorators: [{
2317
2381
  type: Component,
2318
- args: [{ selector: 'app-badge-block', standalone: true, imports: [
2319
- Badge,
2320
- TranslocoPipe
2321
- ], template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <section class=\"component-section\">\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <p class=\"description\">\n {{ 'badgeDoc.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code>&lt;dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> ({{ 'badgeDoc.required' | transloco }}) \u2013 {{ 'badgeDoc.inputText' | transloco }}</li>\n <li><strong>color</strong> \u2013 {{ 'badgeDoc.inputColor' | transloco }}</li>\n <li><strong>variant</strong> \u2013 {{ 'badgeDoc.inputVariant' | transloco }}</li>\n <li><strong>size</strong> \u2013 {{ 'badgeDoc.inputSize' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item dd-badge{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
2322
- }] });
2382
+ args: [{ selector: 'app-badge-block', standalone: true, imports: [Badge, TranslocoPipe, DuckDevCardAccent, DdFlexDirectionDirective], template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <section class=\"component-section\">\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <dd-card-accent [content]=\"descEl\" [color]=\"colorWhite\"></dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code>&lt;dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [content]=\"inputTextEl\" [color]=\"colorWhite\"></dd-card-accent>\n <dd-card-accent [content]=\"inputColorEl\" [color]=\"colorViolet\"></dd-card-accent>\n <dd-card-accent [content]=\"inputVariantEl\" [color]=\"colorOrange\"></dd-card-accent>\n <dd-card-accent [content]=\"inputSizeEl\" [color]=\"colorGray\"></dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item dd-badge{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
2383
+ }], ctorParameters: () => [] });
2323
2384
 
2324
2385
  class DirectiveBlock {
2325
2386
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DirectiveBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
2326
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: DirectiveBlock, isStandalone: true, selector: "app-directive-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'directivesDoc.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'directivesDoc.ddFlexTitle' | transloco }}</h2>\n <p class=\"description\">\n {{ 'directivesDoc.ddFlexDescription' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'directivesDoc.usage' | transloco }}</h3>\n <pre><code>&lt;div ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"12\"&gt;\n &lt;span&gt;Item 1&lt;/span&gt;\n &lt;span&gt;Item 2&lt;/span&gt;\n&lt;/div&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'directivesDoc.inputs' | transloco }}</h3>\n <ul>\n <li><strong>ddFlexDirection</strong> \u2013 {{ 'directivesDoc.inputDirection' | transloco }}</li>\n <li><strong>gap</strong> \u2013 {{ 'directivesDoc.inputGap' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'directivesDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.row8' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"8\">\n <span class=\"chip\">A</span>\n <span class=\"chip\">B</span>\n <span class=\"chip\">C</span>\n </div>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.col12' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'col'\" [gap]=\"12\">\n <span class=\"chip\">One</span>\n <span class=\"chip\">Two</span>\n <span class=\"chip\">Three</span>\n </div>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.row1rem' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"'1rem'\">\n <span class=\"chip\">Left</span>\n <span class=\"chip\">Right</span>\n </div>\n </div>\n </div>\n\n </div>\n </section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item .demo-box{width:100%;min-height:60px;padding:12px;border-radius:8px;background:var(--dd-base-0);border:1px dashed var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .chip{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--dd-base-600);background:var(--dd-base-100);border:1px solid var(--dd-base-300)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
2387
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: DirectiveBlock, isStandalone: true, selector: "app-directive-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'directivesDoc.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'directivesDoc.ddFlexTitle' | transloco }}</h2>\n <p class=\"description\">\n {{ 'directivesDoc.ddFlexDescription' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'directivesDoc.usage' | transloco }}</h3>\n <pre><code>&lt;div ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"12\" [justifyContent]=\"'space-between'\" [alignItems]=\"'center'\"&gt;\n &lt;span&gt;Item 1&lt;/span&gt;\n &lt;span&gt;Item 2&lt;/span&gt;\n&lt;/div&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'directivesDoc.inputs' | transloco }}</h3>\n <ul>\n <li><strong>ddFlexDirection</strong> \u2013 {{ 'directivesDoc.inputDirection' | transloco }}</li>\n <li><strong>gap</strong> \u2013 {{ 'directivesDoc.inputGap' | transloco }}</li>\n <li><strong>justifyContent</strong> \u2013 {{ 'directivesDoc.inputJustify' | transloco }}</li>\n <li><strong>alignItems</strong> \u2013 {{ 'directivesDoc.inputAlign' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'directivesDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.row8' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"8\">\n <span class=\"chip\">A</span>\n <span class=\"chip\">B</span>\n <span class=\"chip\">C</span>\n </div>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.col12' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'col'\" [gap]=\"12\">\n <span class=\"chip\">One</span>\n <span class=\"chip\">Two</span>\n <span class=\"chip\">Three</span>\n </div>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.row1rem' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"'1rem'\">\n <span class=\"chip\">Left</span>\n <span class=\"chip\">Right</span>\n </div>\n </div>\n </div>\n </div>\n </section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item .demo-box{width:100%;min-height:60px;padding:12px;border-radius:8px;background:var(--dd-base-0);border:1px dashed var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .chip{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--dd-base-600);background:var(--dd-base-100);border:1px solid var(--dd-base-300)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
2327
2388
  }
2328
2389
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DirectiveBlock, decorators: [{
2329
2390
  type: Component,
2330
- args: [{ selector: 'app-directive-block', standalone: true, imports: [DdFlexDirectionDirective, TranslocoPipe], template: "<div class=\"demo-container\">\n <h1>{{ 'directivesDoc.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'directivesDoc.ddFlexTitle' | transloco }}</h2>\n <p class=\"description\">\n {{ 'directivesDoc.ddFlexDescription' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'directivesDoc.usage' | transloco }}</h3>\n <pre><code>&lt;div ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"12\"&gt;\n &lt;span&gt;Item 1&lt;/span&gt;\n &lt;span&gt;Item 2&lt;/span&gt;\n&lt;/div&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'directivesDoc.inputs' | transloco }}</h3>\n <ul>\n <li><strong>ddFlexDirection</strong> \u2013 {{ 'directivesDoc.inputDirection' | transloco }}</li>\n <li><strong>gap</strong> \u2013 {{ 'directivesDoc.inputGap' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'directivesDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.row8' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"8\">\n <span class=\"chip\">A</span>\n <span class=\"chip\">B</span>\n <span class=\"chip\">C</span>\n </div>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.col12' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'col'\" [gap]=\"12\">\n <span class=\"chip\">One</span>\n <span class=\"chip\">Two</span>\n <span class=\"chip\">Three</span>\n </div>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.row1rem' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"'1rem'\">\n <span class=\"chip\">Left</span>\n <span class=\"chip\">Right</span>\n </div>\n </div>\n </div>\n\n </div>\n </section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item .demo-box{width:100%;min-height:60px;padding:12px;border-radius:8px;background:var(--dd-base-0);border:1px dashed var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .chip{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--dd-base-600);background:var(--dd-base-100);border:1px solid var(--dd-base-300)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
2391
+ args: [{ selector: 'app-directive-block', standalone: true, imports: [DdFlexDirectionDirective, TranslocoPipe], template: "<div class=\"demo-container\">\n <h1>{{ 'directivesDoc.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'directivesDoc.ddFlexTitle' | transloco }}</h2>\n <p class=\"description\">\n {{ 'directivesDoc.ddFlexDescription' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'directivesDoc.usage' | transloco }}</h3>\n <pre><code>&lt;div ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"12\" [justifyContent]=\"'space-between'\" [alignItems]=\"'center'\"&gt;\n &lt;span&gt;Item 1&lt;/span&gt;\n &lt;span&gt;Item 2&lt;/span&gt;\n&lt;/div&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'directivesDoc.inputs' | transloco }}</h3>\n <ul>\n <li><strong>ddFlexDirection</strong> \u2013 {{ 'directivesDoc.inputDirection' | transloco }}</li>\n <li><strong>gap</strong> \u2013 {{ 'directivesDoc.inputGap' | transloco }}</li>\n <li><strong>justifyContent</strong> \u2013 {{ 'directivesDoc.inputJustify' | transloco }}</li>\n <li><strong>alignItems</strong> \u2013 {{ 'directivesDoc.inputAlign' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'directivesDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.row8' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"8\">\n <span class=\"chip\">A</span>\n <span class=\"chip\">B</span>\n <span class=\"chip\">C</span>\n </div>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.col12' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'col'\" [gap]=\"12\">\n <span class=\"chip\">One</span>\n <span class=\"chip\">Two</span>\n <span class=\"chip\">Three</span>\n </div>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.row1rem' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"'1rem'\">\n <span class=\"chip\">Left</span>\n <span class=\"chip\">Right</span>\n </div>\n </div>\n </div>\n </div>\n </section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item .demo-box{width:100%;min-height:60px;padding:12px;border-radius:8px;background:var(--dd-base-0);border:1px dashed var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .chip{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--dd-base-600);background:var(--dd-base-100);border:1px solid var(--dd-base-300)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
2331
2392
  }] });
2332
2393
 
2333
2394
  class DuckDevAccordionComponent {
2334
2395
  content = input.required({ ...(ngDevMode ? { debugName: "content" } : {}) });
2335
2396
  title = input.required({ ...(ngDevMode ? { debugName: "title" } : {}) });
2336
- color = input(ButtonEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
2397
+ color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
2337
2398
  isOpen = signal(false, { ...(ngDevMode ? { debugName: "isOpen" } : {}) });
2338
2399
  toggle() {
2339
2400
  this.isOpen.update((prev) => !prev);
2340
2401
  }
2341
2402
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2342
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevAccordionComponent, isStandalone: true, selector: "duck-dev-accordion", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"duck-dev-accordion\">\n <button\n type=\"button\"\n class=\"accordion-header\"\n [class.open]=\"isOpen()\"\n [attr.data-color]=\"color()\"\n (click)=\"toggle()\"\n >\n {{ title() }}\n <duck-dev-icon\n name=\"duck-dev-chevron-right-medium\"\n [class.open-chevron]=\"isOpen()\"\n />\n </button>\n @if (isOpen()) {\n <div\n class=\"accordion-content\"\n animate.enter=\"enter-animation\"\n animate.leave=\"leaving\"\n >\n <ng-container [ngTemplateOutlet]=\"content()\"></ng-container>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-accordion{border:1px solid var(--dd-base-200);border-radius:12px;background:var(--dd-base-300);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-size:14px;font-weight:600;background:var(--dd-base-0);border:none;cursor:pointer;position:relative;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease;color:var(--dd-base-600)}.accordion-header[data-color=violet]{background:color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent);color:var(--dd-base-accent-blue)}.accordion-header[data-color=violet]:hover{background:color-mix(in srgb,var(--dd-base-accent-blue) 24%,transparent)}.accordion-header[data-color=orange]{background:color-mix(in srgb,var(--dd-base-accent-orange) 14%,transparent);color:var(--dd-base-accent-orange)}.accordion-header[data-color=orange]:hover{background:color-mix(in srgb,var(--dd-base-accent-orange) 24%,transparent)}.accordion-header[data-color=gray]{background:var(--dd-base-100);color:var(--dd-base-600)}.accordion-header[data-color=gray]:hover{background:var(--dd-base-200)}.accordion-header[data-color=dark]{background:var(--dd-base-200);color:var(--dd-base-700)}.accordion-header[data-color=dark]:hover{background:var(--dd-base-300)}.accordion-header[data-color=white],.accordion-header:not([data-color]){background:var(--dd-base-0);color:var(--dd-base-600)}.accordion-header[data-color=white]:hover,.accordion-header:not([data-color]):hover{background:var(--dd-base-100)}.accordion-content{overflow:hidden;background-color:var(--dd-base-100);line-height:1.5}duck-dev-icon{transition:transform .3s}.open-chevron{transform:rotate(90deg)}.enter-animation{animation:slideDown .5s forwards}@keyframes slideDown{0%{max-height:0}to{max-height:500px}}.leaving{animation:slideUp .3s forwards}@keyframes slideUp{0%{max-height:300px}to{max-height:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2403
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevAccordionComponent, isStandalone: true, selector: "duck-dev-accordion", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"duck-dev-accordion\">\n <button\n type=\"button\"\n class=\"accordion-header\"\n [class.open]=\"isOpen()\"\n [attr.data-color]=\"color()\"\n (click)=\"toggle()\"\n >\n {{ title() }}\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" [class.open-chevron]=\"isOpen()\" />\n </button>\n @if (isOpen()) {\n <div class=\"accordion-content\" animate.enter=\"enter-animation\" animate.leave=\"leaving\">\n <ng-container [ngTemplateOutlet]=\"content()\"></ng-container>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-accordion{border:1px solid var(--dd-base-200);border-radius:12px;background:var(--dd-base-300);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-size:14px;font-weight:600;background:var(--dd-base-0);border:none;cursor:pointer;position:relative;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease;color:var(--dd-base-600)}.accordion-header[data-color=violet]{background:color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent);color:var(--dd-base-accent-blue)}.accordion-header[data-color=violet]:hover{background:color-mix(in srgb,var(--dd-base-accent-blue) 24%,transparent)}.accordion-header[data-color=orange]{background:color-mix(in srgb,var(--dd-base-accent-orange) 14%,transparent);color:var(--dd-base-accent-orange)}.accordion-header[data-color=orange]:hover{background:color-mix(in srgb,var(--dd-base-accent-orange) 24%,transparent)}.accordion-header[data-color=gray]{background:var(--dd-base-100);color:var(--dd-base-600)}.accordion-header[data-color=gray]:hover{background:var(--dd-base-200)}.accordion-header[data-color=dark]{background:var(--dd-base-200);color:var(--dd-base-700)}.accordion-header[data-color=dark]:hover{background:var(--dd-base-300)}.accordion-header[data-color=white],.accordion-header:not([data-color]){background:var(--dd-base-0);color:var(--dd-base-600)}.accordion-header[data-color=white]:hover,.accordion-header:not([data-color]):hover{background:var(--dd-base-100)}.accordion-content{overflow:hidden;background-color:var(--dd-base-100);line-height:1.5}duck-dev-icon{transition:transform .3s}.open-chevron{transform:rotate(90deg)}.enter-animation{animation:slideDown .5s forwards}@keyframes slideDown{0%{max-height:0}to{max-height:500px}}.leaving{animation:slideUp .3s forwards}@keyframes slideUp{0%{max-height:300px}to{max-height:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2343
2404
  }
2344
2405
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionComponent, decorators: [{
2345
2406
  type: Component,
2346
- args: [{ selector: 'duck-dev-accordion', standalone: true, imports: [
2347
- NgTemplateOutlet,
2348
- DuckDevIcon
2349
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"duck-dev-accordion\">\n <button\n type=\"button\"\n class=\"accordion-header\"\n [class.open]=\"isOpen()\"\n [attr.data-color]=\"color()\"\n (click)=\"toggle()\"\n >\n {{ title() }}\n <duck-dev-icon\n name=\"duck-dev-chevron-right-medium\"\n [class.open-chevron]=\"isOpen()\"\n />\n </button>\n @if (isOpen()) {\n <div\n class=\"accordion-content\"\n animate.enter=\"enter-animation\"\n animate.leave=\"leaving\"\n >\n <ng-container [ngTemplateOutlet]=\"content()\"></ng-container>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-accordion{border:1px solid var(--dd-base-200);border-radius:12px;background:var(--dd-base-300);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-size:14px;font-weight:600;background:var(--dd-base-0);border:none;cursor:pointer;position:relative;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease;color:var(--dd-base-600)}.accordion-header[data-color=violet]{background:color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent);color:var(--dd-base-accent-blue)}.accordion-header[data-color=violet]:hover{background:color-mix(in srgb,var(--dd-base-accent-blue) 24%,transparent)}.accordion-header[data-color=orange]{background:color-mix(in srgb,var(--dd-base-accent-orange) 14%,transparent);color:var(--dd-base-accent-orange)}.accordion-header[data-color=orange]:hover{background:color-mix(in srgb,var(--dd-base-accent-orange) 24%,transparent)}.accordion-header[data-color=gray]{background:var(--dd-base-100);color:var(--dd-base-600)}.accordion-header[data-color=gray]:hover{background:var(--dd-base-200)}.accordion-header[data-color=dark]{background:var(--dd-base-200);color:var(--dd-base-700)}.accordion-header[data-color=dark]:hover{background:var(--dd-base-300)}.accordion-header[data-color=white],.accordion-header:not([data-color]){background:var(--dd-base-0);color:var(--dd-base-600)}.accordion-header[data-color=white]:hover,.accordion-header:not([data-color]):hover{background:var(--dd-base-100)}.accordion-content{overflow:hidden;background-color:var(--dd-base-100);line-height:1.5}duck-dev-icon{transition:transform .3s}.open-chevron{transform:rotate(90deg)}.enter-animation{animation:slideDown .5s forwards}@keyframes slideDown{0%{max-height:0}to{max-height:500px}}.leaving{animation:slideUp .3s forwards}@keyframes slideUp{0%{max-height:300px}to{max-height:0}}\n"] }]
2407
+ args: [{ selector: 'duck-dev-accordion', standalone: true, imports: [NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"duck-dev-accordion\">\n <button\n type=\"button\"\n class=\"accordion-header\"\n [class.open]=\"isOpen()\"\n [attr.data-color]=\"color()\"\n (click)=\"toggle()\"\n >\n {{ title() }}\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" [class.open-chevron]=\"isOpen()\" />\n </button>\n @if (isOpen()) {\n <div class=\"accordion-content\" animate.enter=\"enter-animation\" animate.leave=\"leaving\">\n <ng-container [ngTemplateOutlet]=\"content()\"></ng-container>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-accordion{border:1px solid var(--dd-base-200);border-radius:12px;background:var(--dd-base-300);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-size:14px;font-weight:600;background:var(--dd-base-0);border:none;cursor:pointer;position:relative;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease;color:var(--dd-base-600)}.accordion-header[data-color=violet]{background:color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent);color:var(--dd-base-accent-blue)}.accordion-header[data-color=violet]:hover{background:color-mix(in srgb,var(--dd-base-accent-blue) 24%,transparent)}.accordion-header[data-color=orange]{background:color-mix(in srgb,var(--dd-base-accent-orange) 14%,transparent);color:var(--dd-base-accent-orange)}.accordion-header[data-color=orange]:hover{background:color-mix(in srgb,var(--dd-base-accent-orange) 24%,transparent)}.accordion-header[data-color=gray]{background:var(--dd-base-100);color:var(--dd-base-600)}.accordion-header[data-color=gray]:hover{background:var(--dd-base-200)}.accordion-header[data-color=dark]{background:var(--dd-base-200);color:var(--dd-base-700)}.accordion-header[data-color=dark]:hover{background:var(--dd-base-300)}.accordion-header[data-color=white],.accordion-header:not([data-color]){background:var(--dd-base-0);color:var(--dd-base-600)}.accordion-header[data-color=white]:hover,.accordion-header:not([data-color]):hover{background:var(--dd-base-100)}.accordion-content{overflow:hidden;background-color:var(--dd-base-100);line-height:1.5}duck-dev-icon{transition:transform .3s}.open-chevron{transform:rotate(90deg)}.enter-animation{animation:slideDown .5s forwards}@keyframes slideDown{0%{max-height:0}to{max-height:500px}}.leaving{animation:slideUp .3s forwards}@keyframes slideUp{0%{max-height:300px}to{max-height:0}}\n"] }]
2350
2408
  }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
2351
2409
 
2352
2410
  class AccordionBlock {
2353
- colorViolet = ButtonEnumColor.Violet;
2354
- colorOrange = ButtonEnumColor.Orange;
2355
- colorWhite = ButtonEnumColor.White;
2356
- colorGray = ButtonEnumColor.Gray;
2357
- colorDark = ButtonEnumColor.Dark;
2411
+ colorViolet = AccentEnumColor.Violet;
2412
+ colorOrange = AccentEnumColor.Orange;
2413
+ colorWhite = AccentEnumColor.White;
2414
+ colorGray = AccentEnumColor.Gray;
2415
+ colorDark = AccentEnumColor.Dark;
2358
2416
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
2359
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: AccordionBlock, isStandalone: true, selector: "app-accordion-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li><strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference with content</li>\n <li><strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark (default: White)</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion [title]=\"'accordionDoc.sample.q1.title' | transloco\" [content]=\"q1Tpl\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion [title]=\"'accordionDoc.sample.q2.title' | transloco\" [content]=\"q2Tpl\" [color]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion [title]=\"'accordionDoc.sample.q3.title' | transloco\" [content]=\"q3Tpl\" [color]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion [title]=\"'accordionDoc.sample.q1.title' | transloco\" [content]=\"q1Tpl\" [color]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion [title]=\"'accordionDoc.sample.q2.title' | transloco\" [content]=\"q2Tpl\" [color]=\"colorDark\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion [title]=\"'accordionDoc.sample.q3.title' | transloco\" [content]=\"q3Tpl\" [color]=\"colorWhite\" />\n </div>\n </div>\n </div>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
2417
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: AccordionBlock, isStandalone: true, selector: "app-accordion-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n </div>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
2360
2418
  }
2361
2419
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionBlock, decorators: [{
2362
2420
  type: Component,
2363
- args: [{ selector: 'app-accordion-block', standalone: true, imports: [TranslocoPipe, DuckDevAccordionComponent], template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li><strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference with content</li>\n <li><strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark (default: White)</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion [title]=\"'accordionDoc.sample.q1.title' | transloco\" [content]=\"q1Tpl\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion [title]=\"'accordionDoc.sample.q2.title' | transloco\" [content]=\"q2Tpl\" [color]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion [title]=\"'accordionDoc.sample.q3.title' | transloco\" [content]=\"q3Tpl\" [color]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion [title]=\"'accordionDoc.sample.q1.title' | transloco\" [content]=\"q1Tpl\" [color]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion [title]=\"'accordionDoc.sample.q2.title' | transloco\" [content]=\"q2Tpl\" [color]=\"colorDark\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion [title]=\"'accordionDoc.sample.q3.title' | transloco\" [content]=\"q3Tpl\" [color]=\"colorWhite\" />\n </div>\n </div>\n </div>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
2421
+ args: [{ selector: 'app-accordion-block', standalone: true, imports: [TranslocoPipe, DuckDevAccordionComponent], template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n </div>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
2364
2422
  }] });
2365
2423
 
2424
+ class SliderFlip {
2425
+ cdr = inject(ChangeDetectorRef);
2426
+ items = input.required({ ...(ngDevMode ? { debugName: "items" } : {}) });
2427
+ intervalMs = input(3000, { ...(ngDevMode ? { debugName: "intervalMs" } : {}) });
2428
+ autoplay = input(true, { ...(ngDevMode ? { debugName: "autoplay" } : {}) });
2429
+ color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
2430
+ currentIndex = 0;
2431
+ previousIndex = null;
2432
+ isAnimating = false;
2433
+ animateIn = false;
2434
+ animationDurationMs = 300;
2435
+ goNext() {
2436
+ const len = this.items().length;
2437
+ if (!len || this.isAnimating)
2438
+ return;
2439
+ const next = (this.currentIndex + 1) % len;
2440
+ this.showSlide(next);
2441
+ }
2442
+ goPrev() {
2443
+ const len = this.items().length;
2444
+ if (!len || this.isAnimating)
2445
+ return;
2446
+ const next = (this.currentIndex - 1 + len) % len;
2447
+ this.showSlide(next);
2448
+ }
2449
+ showSlide(nextIndex) {
2450
+ if (nextIndex === this.currentIndex)
2451
+ return;
2452
+ this.previousIndex = this.currentIndex;
2453
+ this.currentIndex = nextIndex;
2454
+ this.isAnimating = true;
2455
+ this.animateIn = false;
2456
+ this.cdr.detectChanges();
2457
+ requestAnimationFrame(() => {
2458
+ void document.body.offsetWidth;
2459
+ requestAnimationFrame(() => {
2460
+ this.animateIn = true;
2461
+ });
2462
+ });
2463
+ setTimeout(() => this.finishAnimation(), this.animationDurationMs + 60);
2464
+ }
2465
+ onTransitionEnd(evt) {
2466
+ if (!this.isAnimating)
2467
+ return;
2468
+ const prop = evt.propertyName;
2469
+ if (prop === 'opacity' || prop === 'transform' || prop === 'filter') {
2470
+ this.finishAnimation();
2471
+ }
2472
+ }
2473
+ finishAnimation() {
2474
+ if (!this.isAnimating)
2475
+ return;
2476
+ this.isAnimating = false;
2477
+ this.previousIndex = null;
2478
+ this.animateIn = false;
2479
+ }
2480
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderFlip, deps: [], target: i0.ɵɵFactoryTarget.Component });
2481
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: SliderFlip, isStandalone: true, selector: "dd-slider-flip", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, intervalMs: { classPropertyName: "intervalMs", publicName: "intervalMs", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"" } }, ngImport: i0, template: "<div class=\"container\">\n <div class=\"slides\">\n @if (isAnimating && previousIndex !== null) {\n <div class=\"slide blurred\">\n <ng-container [ngTemplateOutlet]=\"items()[previousIndex]\"></ng-container>\n </div>\n }\n <div\n class=\"slide\"\n [class.current]=\"!isAnimating || animateIn\"\n [class.animate-in]=\"animateIn\"\n (transitionend)=\"onTransitionEnd($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"items()[currentIndex]\"></ng-container>\n </div>\n </div>\n\n <!-- Always visible navigation controls placed at the edges -->\n <duck-dev-icon\n class=\"dd-slider-btn dd-slider-btn-prev\"\n name=\"duck-dev-chevron-left-medium\"\n (click)=\"goPrev()\"\n />\n <duck-dev-icon\n class=\"dd-slider-btn dd-slider-btn-next\"\n name=\"duck-dev-chevron-right-medium\"\n (click)=\"goNext()\"\n />\n</div>\n", styles: [".container{width:min(100%,900px);aspect-ratio:16/9;position:relative;overflow:hidden;margin:0 auto}.slides{position:relative;width:100%;display:grid;min-height:1px;height:100%;justify-items:stretch;align-items:stretch}.slide{position:relative;width:100%;height:100%;grid-area:1/1;opacity:0;transform:translateZ(0) scale(.96) translateY(16px);transition:opacity .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)}.slide.current,.slide.animate-in{opacity:1;transform:translateZ(0) scale(1) translateY(0)}.slide.blurred{position:absolute;inset:0;opacity:.45;filter:blur(14px) saturate(1.1);transform:translateZ(0) scale(.94) translateY(24px)}.dd-slider-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:none;color:var(--dd-base-0);border-radius:50%;cursor:pointer;box-shadow:0 2px 8px var(--dd-base-300);transition:scale .2s cubic-bezier(.22,1,.36,1)}.dd-slider-btn:hover{scale:1.2}.dd-slider-btn:disabled{opacity:.5;cursor:default}.dd-slider-btn-prev{left:8px}.dd-slider-btn-next{right:8px}@media(prefers-reduced-motion:reduce){.slide{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }] });
2482
+ }
2483
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderFlip, decorators: [{
2484
+ type: Component,
2485
+ args: [{ selector: 'dd-slider-flip', standalone: true, imports: [CommonModule, DuckDevIcon], host: {
2486
+ '[style.display]': '"block"',
2487
+ }, template: "<div class=\"container\">\n <div class=\"slides\">\n @if (isAnimating && previousIndex !== null) {\n <div class=\"slide blurred\">\n <ng-container [ngTemplateOutlet]=\"items()[previousIndex]\"></ng-container>\n </div>\n }\n <div\n class=\"slide\"\n [class.current]=\"!isAnimating || animateIn\"\n [class.animate-in]=\"animateIn\"\n (transitionend)=\"onTransitionEnd($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"items()[currentIndex]\"></ng-container>\n </div>\n </div>\n\n <!-- Always visible navigation controls placed at the edges -->\n <duck-dev-icon\n class=\"dd-slider-btn dd-slider-btn-prev\"\n name=\"duck-dev-chevron-left-medium\"\n (click)=\"goPrev()\"\n />\n <duck-dev-icon\n class=\"dd-slider-btn dd-slider-btn-next\"\n name=\"duck-dev-chevron-right-medium\"\n (click)=\"goNext()\"\n />\n</div>\n", styles: [".container{width:min(100%,900px);aspect-ratio:16/9;position:relative;overflow:hidden;margin:0 auto}.slides{position:relative;width:100%;display:grid;min-height:1px;height:100%;justify-items:stretch;align-items:stretch}.slide{position:relative;width:100%;height:100%;grid-area:1/1;opacity:0;transform:translateZ(0) scale(.96) translateY(16px);transition:opacity .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)}.slide.current,.slide.animate-in{opacity:1;transform:translateZ(0) scale(1) translateY(0)}.slide.blurred{position:absolute;inset:0;opacity:.45;filter:blur(14px) saturate(1.1);transform:translateZ(0) scale(.94) translateY(24px)}.dd-slider-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:none;color:var(--dd-base-0);border-radius:50%;cursor:pointer;box-shadow:0 2px 8px var(--dd-base-300);transition:scale .2s cubic-bezier(.22,1,.36,1)}.dd-slider-btn:hover{scale:1.2}.dd-slider-btn:disabled{opacity:.5;cursor:default}.dd-slider-btn-prev{left:8px}.dd-slider-btn-next{right:8px}@media(prefers-reduced-motion:reduce){.slide{transition:none}}\n"] }]
2488
+ }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], intervalMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervalMs", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
2489
+
2490
+ class SliderClassic {
2491
+ items = input.required({ ...(ngDevMode ? { debugName: "items" } : {}) });
2492
+ intervalMs = input(3000, { ...(ngDevMode ? { debugName: "intervalMs" } : {}) });
2493
+ autoplay = input(true, { ...(ngDevMode ? { debugName: "autoplay" } : {}) });
2494
+ color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
2495
+ currentIndex = signal(0, { ...(ngDevMode ? { debugName: "currentIndex" } : {}) });
2496
+ direction = signal('next', { ...(ngDevMode ? { debugName: "direction" } : {}) });
2497
+ goNext() {
2498
+ const len = this.items().length;
2499
+ if (!len)
2500
+ return;
2501
+ this.direction.set('next');
2502
+ const next = (this.currentIndex() + 1) % len;
2503
+ this.currentIndex.set(next);
2504
+ }
2505
+ goPrev() {
2506
+ const len = this.items().length;
2507
+ if (!len)
2508
+ return;
2509
+ this.direction.set('prev');
2510
+ const next = (this.currentIndex() - 1 + len) % len;
2511
+ this.currentIndex.set(next);
2512
+ }
2513
+ getEnterAnimation() {
2514
+ return this.direction() === 'next' ? 'enter-from-right' : 'enter-from-left';
2515
+ }
2516
+ getLeaveAnimation() {
2517
+ return this.direction() === 'next' ? 'leave-to-left' : 'leave-to-right';
2518
+ }
2519
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
2520
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: SliderClassic, isStandalone: true, selector: "dd-slider-classic", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, intervalMs: { classPropertyName: "intervalMs", publicName: "intervalMs", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"" } }, ngImport: i0, template: "<div class=\"container\">\n <div class=\"slides\" #slidesContainer>\n @for (item of items(); track $index) {\n @if ($index === currentIndex()) {\n <div\n class=\"slide current content-full\"\n [animate.enter]=\"getEnterAnimation()\"\n [animate.leave]=\"getLeaveAnimation()\"\n >\n <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n </div>\n }\n }\n </div>\n\n <duck-dev-icon\n class=\"dd-slider-btn dd-slider-btn-prev\"\n name=\"duck-dev-chevron-left-medium\"\n (click)=\"goPrev()\"\n />\n <duck-dev-icon\n class=\"dd-slider-btn dd-slider-btn-next\"\n name=\"duck-dev-chevron-right-medium\"\n (click)=\"goNext()\"\n />\n</div>\n", styles: [".container{position:relative;overflow:hidden;margin:0 auto;height:100%}.slides{position:relative;min-height:1px;display:grid;height:100%;justify-items:start;align-items:start}.slide{position:relative;width:100%;height:100%;grid-area:1/1}.enter-from-right{animation:enter-from-right-animation .3s ease-out}@keyframes enter-from-right-animation{0%{opacity:.5;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.enter-from-left{animation:enter-from-left-animation .3s ease-out}@keyframes enter-from-left-animation{0%{opacity:.5;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}.leave-to-left{animation:leave-to-left .3s ease-in}@keyframes leave-to-left{0%{opacity:1;transform:translate(0)}to{opacity:.5;transform:translate(-100%)}}.leave-to-right{animation:leave-to-right .3s ease-in}@keyframes leave-to-right{0%{opacity:1;transform:translate(0)}to{opacity:.5;transform:translate(100%)}}.dd-slider-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;color:var(--dd-base-0);cursor:pointer;transition:scale .2s cubic-bezier(.22,1,.36,1)}.dd-slider-btn:hover{scale:1.4}.dd-slider-btn:disabled{opacity:.5;cursor:default}.dd-slider-btn-prev{left:8px}.dd-slider-btn-next{right:8px}@media(prefers-reduced-motion:reduce){.enter-from-right,.enter-from-left,.leave-to-left,.leave-to-right{animation:none}}\n"], dependencies: [{ kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
2521
+ }
2522
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderClassic, decorators: [{
2523
+ type: Component,
2524
+ args: [{ selector: 'dd-slider-classic', standalone: true, imports: [DuckDevIcon, NgTemplateOutlet], host: {
2525
+ '[style.display]': '"block"',
2526
+ }, template: "<div class=\"container\">\n <div class=\"slides\" #slidesContainer>\n @for (item of items(); track $index) {\n @if ($index === currentIndex()) {\n <div\n class=\"slide current content-full\"\n [animate.enter]=\"getEnterAnimation()\"\n [animate.leave]=\"getLeaveAnimation()\"\n >\n <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n </div>\n }\n }\n </div>\n\n <duck-dev-icon\n class=\"dd-slider-btn dd-slider-btn-prev\"\n name=\"duck-dev-chevron-left-medium\"\n (click)=\"goPrev()\"\n />\n <duck-dev-icon\n class=\"dd-slider-btn dd-slider-btn-next\"\n name=\"duck-dev-chevron-right-medium\"\n (click)=\"goNext()\"\n />\n</div>\n", styles: [".container{position:relative;overflow:hidden;margin:0 auto;height:100%}.slides{position:relative;min-height:1px;display:grid;height:100%;justify-items:start;align-items:start}.slide{position:relative;width:100%;height:100%;grid-area:1/1}.enter-from-right{animation:enter-from-right-animation .3s ease-out}@keyframes enter-from-right-animation{0%{opacity:.5;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.enter-from-left{animation:enter-from-left-animation .3s ease-out}@keyframes enter-from-left-animation{0%{opacity:.5;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}.leave-to-left{animation:leave-to-left .3s ease-in}@keyframes leave-to-left{0%{opacity:1;transform:translate(0)}to{opacity:.5;transform:translate(-100%)}}.leave-to-right{animation:leave-to-right .3s ease-in}@keyframes leave-to-right{0%{opacity:1;transform:translate(0)}to{opacity:.5;transform:translate(100%)}}.dd-slider-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;color:var(--dd-base-0);cursor:pointer;transition:scale .2s cubic-bezier(.22,1,.36,1)}.dd-slider-btn:hover{scale:1.4}.dd-slider-btn:disabled{opacity:.5;cursor:default}.dd-slider-btn-prev{left:8px}.dd-slider-btn-next{right:8px}@media(prefers-reduced-motion:reduce){.enter-from-right,.enter-from-left,.leave-to-left,.leave-to-right{animation:none}}\n"] }]
2527
+ }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], intervalMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervalMs", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
2528
+
2529
+ class SliderBlock {
2530
+ slideTemplates = viewChildren('slide', { ...(ngDevMode ? { debugName: "slideTemplates" } : {}) });
2531
+ slides = signal([], { ...(ngDevMode ? { debugName: "slides" } : {}) });
2532
+ ngAfterViewInit() {
2533
+ this.slides.set([...this.slideTemplates()]);
2534
+ }
2535
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
2536
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.1", type: SliderBlock, isStandalone: true, selector: "app-slider-block", viewQueries: [{ propertyName: "slideTemplates", predicate: ["slide"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'slider.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'slider.raindrops.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'slider.raindrops.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'slider.raindrops.usage' | transloco }}</h3>\n <pre><code>&lt;dd-slider-flip\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n [color]=\"'White'\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'slider.raindrops.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>items</strong> ({{ 'slider.required' | transloco }}) -\n {{ 'slider.raindrops.inputItems' | transloco }}\n </li>\n <li><strong>intervalMs</strong> - {{ 'slider.raindrops.inputInterval' | transloco }}</li>\n <li><strong>autoplay</strong> - {{ 'slider.raindrops.inputAutoplay' | transloco }}</li>\n <li>\n <strong>color</strong> - {{ 'slider.colorDescription' | transloco }}\n </li>\n </ul>\n </div>\n\n <!-- Meaningful demo slides -->\n <ng-template #slide>\n <section class=\"dd-doc-slide dd-doc-slide-hero\" aria-label=\"Overview\">\n <h3 class=\"dd-doc-slide__title\">{{ 'slider.demo.heroTitle' | transloco }}</h3>\n <p class=\"dd-doc-slide__subtitle\">\n {{ 'slider.demo.heroSubtitle' | transloco }}\n </p>\n <a class=\"dd-doc-slide__cta\" href=\"#components\" aria-label=\"{{ 'slider.demo.heroCta' | transloco }}\"\n >{{ 'slider.demo.heroCta' | transloco }}</a\n >\n </section>\n </ng-template>\n\n <ng-template #slide>\n <section class=\"dd-doc-slide dd-doc-slide-features\" aria-label=\"Highlights\">\n <ul class=\"dd-doc-feature-list\" role=\"list\">\n <li class=\"dd-doc-feature\">\n <h4>{{ 'slider.demo.features.accessibleTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.accessibleDesc' | transloco }}</p>\n </li>\n <li class=\"dd-doc-feature\">\n <h4>{{ 'slider.demo.features.themeableTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.themeableDesc' | transloco }}</p>\n </li>\n <li class=\"dd-doc-feature\">\n <h4>{{ 'slider.demo.features.lightweightTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.lightweightDesc' | transloco }}</p>\n </li>\n </ul>\n </section>\n </ng-template>\n\n <ng-template #slide>\n <section class=\"dd-doc-slide dd-doc-slide-code\" aria-label=\"Usage example\">\n <h4 class=\"dd-doc-slide-code__title\">{{ 'slider.demo.code.quickStartTitle' | transloco }}</h4>\n <pre class=\"dd-doc-code\"><code>&lt;dd-slider-flip\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"&gt;\n&lt;/dd-slider-flip&gt;</code></pre>\n <p class=\"dd-doc-note\">{{ 'slider.demo.code.tip' | transloco }}</p>\n </section>\n </ng-template>\n\n <div class=\"examples-block\">\n <h3>{{ 'slider.raindrops.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'slider.raindrops.exampleBasic' | transloco }}</p>\n <dd-slider-flip [items]=\"slides()\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'slider.classic.exampleBasic' | transloco }}</p>\n <dd-slider-classic [items]=\"slides()\" />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section\">\n <h2>{{ 'slider.classic.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'slider.classic.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'slider.classic.usage' | transloco }}</h3>\n <pre><code>&lt;dd-slider-classic\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'slider.classic.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>items</strong> ({{ 'slider.required' | transloco }}) -\n {{ 'slider.classic.inputItems' | transloco }}\n </li>\n <li><strong>intervalMs</strong> - {{ 'slider.classic.inputInterval' | transloco }}</li>\n <li><strong>autoplay</strong> - {{ 'slider.classic.inputAutoplay' | transloco }}</li>\n <li>\n <strong>color</strong> - {{ 'slider.colorDescription' | transloco }}\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'slider.classic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'slider.classic.exampleBasic' | transloco }}</p>\n <dd-slider-classic [items]=\"slides()\" />\n </div>\n </div>\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100)}.demo-container .component-section .examples-block .example-row .example-item dd-slider-flip,.demo-container .component-section .examples-block .example-row .example-item dd-slider-classic{display:block;width:100%;height:240px}.demo-container .component-section .examples-block .example-row .example-item :host ::ng-deep dd-slider-flip .container,.demo-container .component-section .examples-block .example-row .example-item :host ::ng-deep dd-slider-classic .container{height:100%}.demo-container .component-section .examples-block .example-row .example-item{border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}.dd-doc-slide{width:100%;box-sizing:border-box;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.dd-doc-slide-hero{background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid var(--dd-base-200);border-radius:12px}.dd-doc-slide__title{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.dd-doc-slide__subtitle{font-size:16px;color:var(--dd-base-400);margin:0}.dd-doc-slide__cta{display:inline-block;margin-top:8px;padding:10px 16px;border-radius:8px;background:var(--dd-base-accent-blue);color:var(--dd-base-0);text-decoration:none;font-weight:600;box-shadow:0 2px 8px var(--dd-base-300)}.dd-doc-slide__cta:hover{background:var(--dd-base-500)}.dd-doc-slide-features{background:var(--dd-base-0)}.dd-doc-feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.dd-doc-feature{background:var(--dd-base-100);border:1px solid var(--dd-base-200);border-radius:10px;padding:14px}.dd-doc-feature h4{margin:0 0 6px;font-size:16px;color:var(--dd-base-500)}.dd-doc-feature p{margin:0;font-size:14px;color:var(--dd-base-400)}.dd-doc-slide-code{align-items:stretch}.dd-doc-slide-code__title{margin:0 0 8px;font-size:18px;color:var(--dd-base-500)}.dd-doc-code{background:var(--dd-base-600);color:var(--dd-base-100);border-radius:8px;padding:12px;overflow:auto;text-align:left}.dd-doc-note{margin:8px 0 0;font-size:13px;color:var(--dd-base-400)}@media(max-width:768px){.dd-doc-feature-list{grid-template-columns:1fr}.dd-doc-slide__title{font-size:20px}.dd-doc-slide__subtitle{font-size:14px}}\n"], dependencies: [{ kind: "component", type: SliderFlip, selector: "dd-slider-flip", inputs: ["items", "intervalMs", "autoplay", "color"] }, { kind: "component", type: SliderClassic, selector: "dd-slider-classic", inputs: ["items", "intervalMs", "autoplay", "color"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
2537
+ }
2538
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderBlock, decorators: [{
2539
+ type: Component,
2540
+ args: [{ selector: 'app-slider-block', standalone: true, imports: [TranslocoPipe, SliderFlip, SliderClassic], template: "<div class=\"demo-container\">\n <h1>{{ 'slider.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'slider.raindrops.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'slider.raindrops.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'slider.raindrops.usage' | transloco }}</h3>\n <pre><code>&lt;dd-slider-flip\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n [color]=\"'White'\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'slider.raindrops.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>items</strong> ({{ 'slider.required' | transloco }}) -\n {{ 'slider.raindrops.inputItems' | transloco }}\n </li>\n <li><strong>intervalMs</strong> - {{ 'slider.raindrops.inputInterval' | transloco }}</li>\n <li><strong>autoplay</strong> - {{ 'slider.raindrops.inputAutoplay' | transloco }}</li>\n <li>\n <strong>color</strong> - {{ 'slider.colorDescription' | transloco }}\n </li>\n </ul>\n </div>\n\n <!-- Meaningful demo slides -->\n <ng-template #slide>\n <section class=\"dd-doc-slide dd-doc-slide-hero\" aria-label=\"Overview\">\n <h3 class=\"dd-doc-slide__title\">{{ 'slider.demo.heroTitle' | transloco }}</h3>\n <p class=\"dd-doc-slide__subtitle\">\n {{ 'slider.demo.heroSubtitle' | transloco }}\n </p>\n <a class=\"dd-doc-slide__cta\" href=\"#components\" aria-label=\"{{ 'slider.demo.heroCta' | transloco }}\"\n >{{ 'slider.demo.heroCta' | transloco }}</a\n >\n </section>\n </ng-template>\n\n <ng-template #slide>\n <section class=\"dd-doc-slide dd-doc-slide-features\" aria-label=\"Highlights\">\n <ul class=\"dd-doc-feature-list\" role=\"list\">\n <li class=\"dd-doc-feature\">\n <h4>{{ 'slider.demo.features.accessibleTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.accessibleDesc' | transloco }}</p>\n </li>\n <li class=\"dd-doc-feature\">\n <h4>{{ 'slider.demo.features.themeableTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.themeableDesc' | transloco }}</p>\n </li>\n <li class=\"dd-doc-feature\">\n <h4>{{ 'slider.demo.features.lightweightTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.lightweightDesc' | transloco }}</p>\n </li>\n </ul>\n </section>\n </ng-template>\n\n <ng-template #slide>\n <section class=\"dd-doc-slide dd-doc-slide-code\" aria-label=\"Usage example\">\n <h4 class=\"dd-doc-slide-code__title\">{{ 'slider.demo.code.quickStartTitle' | transloco }}</h4>\n <pre class=\"dd-doc-code\"><code>&lt;dd-slider-flip\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"&gt;\n&lt;/dd-slider-flip&gt;</code></pre>\n <p class=\"dd-doc-note\">{{ 'slider.demo.code.tip' | transloco }}</p>\n </section>\n </ng-template>\n\n <div class=\"examples-block\">\n <h3>{{ 'slider.raindrops.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'slider.raindrops.exampleBasic' | transloco }}</p>\n <dd-slider-flip [items]=\"slides()\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'slider.classic.exampleBasic' | transloco }}</p>\n <dd-slider-classic [items]=\"slides()\" />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section\">\n <h2>{{ 'slider.classic.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'slider.classic.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'slider.classic.usage' | transloco }}</h3>\n <pre><code>&lt;dd-slider-classic\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'slider.classic.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>items</strong> ({{ 'slider.required' | transloco }}) -\n {{ 'slider.classic.inputItems' | transloco }}\n </li>\n <li><strong>intervalMs</strong> - {{ 'slider.classic.inputInterval' | transloco }}</li>\n <li><strong>autoplay</strong> - {{ 'slider.classic.inputAutoplay' | transloco }}</li>\n <li>\n <strong>color</strong> - {{ 'slider.colorDescription' | transloco }}\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'slider.classic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'slider.classic.exampleBasic' | transloco }}</p>\n <dd-slider-classic [items]=\"slides()\" />\n </div>\n </div>\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100)}.demo-container .component-section .examples-block .example-row .example-item dd-slider-flip,.demo-container .component-section .examples-block .example-row .example-item dd-slider-classic{display:block;width:100%;height:240px}.demo-container .component-section .examples-block .example-row .example-item :host ::ng-deep dd-slider-flip .container,.demo-container .component-section .examples-block .example-row .example-item :host ::ng-deep dd-slider-classic .container{height:100%}.demo-container .component-section .examples-block .example-row .example-item{border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}.dd-doc-slide{width:100%;box-sizing:border-box;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.dd-doc-slide-hero{background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid var(--dd-base-200);border-radius:12px}.dd-doc-slide__title{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.dd-doc-slide__subtitle{font-size:16px;color:var(--dd-base-400);margin:0}.dd-doc-slide__cta{display:inline-block;margin-top:8px;padding:10px 16px;border-radius:8px;background:var(--dd-base-accent-blue);color:var(--dd-base-0);text-decoration:none;font-weight:600;box-shadow:0 2px 8px var(--dd-base-300)}.dd-doc-slide__cta:hover{background:var(--dd-base-500)}.dd-doc-slide-features{background:var(--dd-base-0)}.dd-doc-feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.dd-doc-feature{background:var(--dd-base-100);border:1px solid var(--dd-base-200);border-radius:10px;padding:14px}.dd-doc-feature h4{margin:0 0 6px;font-size:16px;color:var(--dd-base-500)}.dd-doc-feature p{margin:0;font-size:14px;color:var(--dd-base-400)}.dd-doc-slide-code{align-items:stretch}.dd-doc-slide-code__title{margin:0 0 8px;font-size:18px;color:var(--dd-base-500)}.dd-doc-code{background:var(--dd-base-600);color:var(--dd-base-100);border-radius:8px;padding:12px;overflow:auto;text-align:left}.dd-doc-note{margin:8px 0 0;font-size:13px;color:var(--dd-base-400)}@media(max-width:768px){.dd-doc-feature-list{grid-template-columns:1fr}.dd-doc-slide__title{font-size:20px}.dd-doc-slide__subtitle{font-size:14px}}\n"] }]
2541
+ }], propDecorators: { slideTemplates: [{ type: i0.ViewChildren, args: ['slide', { isSignal: true }] }] } });
2542
+
2543
+ class CardBlock {
2544
+ t = inject(TranslocoService);
2545
+ colorViolet = AccentEnumColor.Violet;
2546
+ colorOrange = AccentEnumColor.Orange;
2547
+ colorWhite = AccentEnumColor.White;
2548
+ colorGray = AccentEnumColor.Gray;
2549
+ colorDark = AccentEnumColor.Dark;
2550
+ // Inputs list content elements
2551
+ inputContentEl;
2552
+ inputColorEl;
2553
+ // Example content elements
2554
+ exampleDefault;
2555
+ exampleViolet;
2556
+ exampleOrange;
2557
+ exampleGray;
2558
+ exampleDark;
2559
+ constructor() {
2560
+ this.inputContentEl = this.createEl(this.t.translate('cardDoc.inputsDesc.content'));
2561
+ this.inputColorEl = this.createEl(this.t.translate('cardDoc.inputsDesc.color'));
2562
+ this.exampleDefault = this.createEl(this.t.translate('cardDoc.examplesDesc.default'));
2563
+ this.exampleViolet = this.createEl(this.t.translate('cardDoc.examplesDesc.violet'));
2564
+ this.exampleOrange = this.createEl(this.t.translate('cardDoc.examplesDesc.orange'));
2565
+ this.exampleGray = this.createEl(this.t.translate('cardDoc.examplesDesc.gray'));
2566
+ this.exampleDark = this.createEl(this.t.translate('cardDoc.examplesDesc.dark'));
2567
+ }
2568
+ createEl(html) {
2569
+ const el = document.createElement('div');
2570
+ el.innerHTML = html;
2571
+ return el;
2572
+ }
2573
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CardBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
2574
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: CardBlock, isStandalone: true, selector: "app-card-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'cardDoc.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'cardDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'cardDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'cardDoc.basic.usage' | transloco }}</h3>\n <pre><code>&lt;dd-card-accent\n [content]=\"exampleDefault\"\n [color]=\"colorWhite\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'cardDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [content]=\"inputContentEl\" [color]=\"colorWhite\"></dd-card-accent>\n </li>\n <li>\n <dd-card-accent [content]=\"inputColorEl\" [color]=\"colorViolet\"></dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'cardDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.defaultWhite' | transloco }}</p>\n <dd-card-accent [content]=\"exampleDefault\" [color]=\"colorWhite\"></dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n <dd-card-accent [content]=\"exampleViolet\" [color]=\"colorViolet\"></dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n <dd-card-accent [content]=\"exampleOrange\" [color]=\"colorOrange\"></dd-card-accent>\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.gray' | transloco }}</p>\n <dd-card-accent [content]=\"exampleGray\" [color]=\"colorGray\"></dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n <dd-card-accent [content]=\"exampleDark\" [color]=\"colorDark\"></dd-card-accent>\n </div>\n </div>\n </div>\n </section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:stretch;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}}\n"], dependencies: [{ kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["content", "color"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
2575
+ }
2576
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CardBlock, decorators: [{
2577
+ type: Component,
2578
+ args: [{ selector: 'app-card-block', standalone: true, imports: [DuckDevCardAccent, TranslocoPipe], template: "<div class=\"demo-container\">\n <h1>{{ 'cardDoc.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'cardDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'cardDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'cardDoc.basic.usage' | transloco }}</h3>\n <pre><code>&lt;dd-card-accent\n [content]=\"exampleDefault\"\n [color]=\"colorWhite\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'cardDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [content]=\"inputContentEl\" [color]=\"colorWhite\"></dd-card-accent>\n </li>\n <li>\n <dd-card-accent [content]=\"inputColorEl\" [color]=\"colorViolet\"></dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'cardDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.defaultWhite' | transloco }}</p>\n <dd-card-accent [content]=\"exampleDefault\" [color]=\"colorWhite\"></dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n <dd-card-accent [content]=\"exampleViolet\" [color]=\"colorViolet\"></dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n <dd-card-accent [content]=\"exampleOrange\" [color]=\"colorOrange\"></dd-card-accent>\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.gray' | transloco }}</p>\n <dd-card-accent [content]=\"exampleGray\" [color]=\"colorGray\"></dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n <dd-card-accent [content]=\"exampleDark\" [color]=\"colorDark\"></dd-card-accent>\n </div>\n </div>\n </div>\n </section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:stretch;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}}\n"] }]
2579
+ }], ctorParameters: () => [] });
2580
+
2366
2581
  class MainDocumentationPage {
2367
2582
  translocoService = inject(TranslocoService);
2368
2583
  title = signal('demo', { ...(ngDevMode ? { debugName: "title" } : {}) });
@@ -2373,16 +2588,18 @@ class MainDocumentationPage {
2373
2588
  { id: 'tabs', label: this.translocoService.translate('tabs.tabs') },
2374
2589
  { id: 'badge', label: this.translocoService.translate('tabs.badge') },
2375
2590
  { id: 'directives', label: this.translocoService.translate('tabs.directives') },
2591
+ { id: 'card', label: this.translocoService.translate('tabs.card') },
2376
2592
  { id: 'input', label: this.translocoService.translate('tabs.input') },
2377
2593
  { id: 'notifications', label: this.translocoService.translate('tabs.notifications') },
2378
- { id: 'svg', label: this.translocoService.translate('tabs.svg') }
2594
+ { id: 'slider', label: this.translocoService.translate('tabs.slider') },
2595
+ { id: 'svg', label: this.translocoService.translate('tabs.svg') },
2379
2596
  ];
2380
2597
  activeTab = signal(this.tabs[0], { ...(ngDevMode ? { debugName: "activeTab" } : {}) });
2381
2598
  onTabChange(tab) {
2382
2599
  this.activeTab.set(tab);
2383
2600
  }
2384
2601
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
2385
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MainDocumentationPage, isStandalone: true, selector: "duck-dev-main-documentation-page", ngImport: i0, template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @if(activeTab().id === 'accordion' ){\n <app-accordion-block />\n }\n @if (activeTab().id === 'buttons') {\n <app-button-block />\n }\n @if (activeTab().id === 'loaders') {\n <app-loader-block />\n }\n @if (activeTab().id === 'tabs') {\n <app-tabs-block />\n }\n @if (activeTab().id === 'badge') {\n <app-badge-block />\n }\n @if (activeTab().id === 'directives') {\n <app-directive-block />\n }\n @if(activeTab().id === 'input'){\n <app-input-block />\n }\n @if(activeTab().id === 'notifications'){\n <app-notification-block />\n }\n @if (activeTab().id === 'svg') {\n <app-duck-dev-svg-block />\n }\n</duck-dev-tab-vertical>\n\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: DuckDevSvgBlock, selector: "app-duck-dev-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: InputBlock, selector: "app-input-block" }, { kind: "component", type: NotificationBlock, selector: "app-notification-block" }, { kind: "component", type: DuckDevNotificationContainer, selector: "duck-dev-notification-container" }, { kind: "component", type: BadgeBlock, selector: "app-badge-block" }, { kind: "component", type: DirectiveBlock, selector: "app-directive-block" }, { kind: "component", type: AccordionBlock, selector: "app-accordion-block" }] });
2602
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MainDocumentationPage, isStandalone: true, selector: "duck-dev-main-documentation-page", ngImport: i0, template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @switch (activeTab().id) {\n @case ('accordion') {\n <app-accordion-block />\n }\n @case ('buttons') {\n <app-button-block />\n }\n @case ('loaders') {\n <app-loader-block />\n }\n @case ('tabs') {\n <app-tabs-block />\n }\n @case ('badge') {\n <app-badge-block />\n }\n @case ('directives') {\n <app-directive-block />\n }\n @case ('card') {\n <app-card-block />\n }\n @case ('input') {\n <app-input-block />\n }\n @case ('notifications') {\n <app-notification-block />\n }\n @case ('slider') {\n <app-slider-block />\n }\n @case ('svg') {\n <app-duck-dev-svg-block />\n }\n }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: DuckDevSvgBlock, selector: "app-duck-dev-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: InputBlock, selector: "app-input-block" }, { kind: "component", type: NotificationBlock, selector: "app-notification-block" }, { kind: "component", type: DuckDevNotificationContainer, selector: "duck-dev-notification-container" }, { kind: "component", type: BadgeBlock, selector: "app-badge-block" }, { kind: "component", type: DirectiveBlock, selector: "app-directive-block" }, { kind: "component", type: AccordionBlock, selector: "app-accordion-block" }, { kind: "component", type: SliderBlock, selector: "app-slider-block" }, { kind: "component", type: CardBlock, selector: "app-card-block" }] });
2386
2603
  }
2387
2604
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, decorators: [{
2388
2605
  type: Component,
@@ -2397,13 +2614,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
2397
2614
  DuckDevNotificationContainer,
2398
2615
  BadgeBlock,
2399
2616
  DirectiveBlock,
2400
- AccordionBlock
2401
- ], template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @if(activeTab().id === 'accordion' ){\n <app-accordion-block />\n }\n @if (activeTab().id === 'buttons') {\n <app-button-block />\n }\n @if (activeTab().id === 'loaders') {\n <app-loader-block />\n }\n @if (activeTab().id === 'tabs') {\n <app-tabs-block />\n }\n @if (activeTab().id === 'badge') {\n <app-badge-block />\n }\n @if (activeTab().id === 'directives') {\n <app-directive-block />\n }\n @if(activeTab().id === 'input'){\n <app-input-block />\n }\n @if(activeTab().id === 'notifications'){\n <app-notification-block />\n }\n @if (activeTab().id === 'svg') {\n <app-duck-dev-svg-block />\n }\n</duck-dev-tab-vertical>\n\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"] }]
2617
+ AccordionBlock,
2618
+ SliderBlock,
2619
+ CardBlock,
2620
+ ], template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @switch (activeTab().id) {\n @case ('accordion') {\n <app-accordion-block />\n }\n @case ('buttons') {\n <app-button-block />\n }\n @case ('loaders') {\n <app-loader-block />\n }\n @case ('tabs') {\n <app-tabs-block />\n }\n @case ('badge') {\n <app-badge-block />\n }\n @case ('directives') {\n <app-directive-block />\n }\n @case ('card') {\n <app-card-block />\n }\n @case ('input') {\n <app-input-block />\n }\n @case ('notifications') {\n <app-notification-block />\n }\n @case ('slider') {\n <app-slider-block />\n }\n @case ('svg') {\n <app-duck-dev-svg-block />\n }\n }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"] }]
2402
2621
  }] });
2403
2622
 
2404
2623
  const DuckDevLibTranslations = {
2405
- en: import('./duck-dev-lib-en-4OEFIyu1.mjs'),
2406
- ru: import('./duck-dev-lib-ru-CcBIFkk3.mjs')
2624
+ en: import('./duck-dev-lib-en-AryRCkw5.mjs'),
2625
+ ru: import('./duck-dev-lib-ru-D_msyug7.mjs'),
2407
2626
  };
2408
2627
 
2409
2628
  /*
@@ -2414,5 +2633,5 @@ const DuckDevLibTranslations = {
2414
2633
  * Generated bundle index. Do not edit.
2415
2634
  */
2416
2635
 
2417
- export { Badge, ButtonBlurLift, ButtonCasper, ButtonEnumColor, ButtonFlip, ButtonGlideOver, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevIcon, DuckDevInput, DuckDevLibTranslations, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevTab, DuckDevTabVertical, LoaderClassic, LoaderLoadingBubble, LoaderThreeDots, MainDocumentationPage };
2636
+ export { AccentEnumColor, Badge, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevCardAccent, DuckDevIcon, DuckDevInput, DuckDevLibTranslations, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevTab, DuckDevTabVertical, LoaderClassic, LoaderLoadingBubble, LoaderThreeDots, MainDocumentationPage, SliderClassic };
2418
2637
  //# sourceMappingURL=duck-dev-lib.mjs.map