duck-dev-lib 0.0.26 → 0.0.28

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-mOVobVPA.mjs} +87 -3
  3. package/fesm2022/{duck-dev-lib-en-4OEFIyu1.mjs.map → duck-dev-lib-en-mOVobVPA.mjs.map} +1 -1
  4. package/fesm2022/{duck-dev-lib-ru-CcBIFkk3.mjs → duck-dev-lib-ru-Vu8xDdcB.mjs} +87 -3
  5. package/fesm2022/{duck-dev-lib-ru-CcBIFkk3.mjs.map → duck-dev-lib-ru-Vu8xDdcB.mjs.map} +1 -1
  6. package/fesm2022/duck-dev-lib.mjs +299 -163
  7. package/fesm2022/duck-dev-lib.mjs.map +1 -1
  8. package/package.json +1 -1
  9. package/types/duck-dev-lib.d.ts +31 -21
package/fesm2022/duck-dev-lib.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect, Injectable, inject, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
2
+ import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect, Injectable, inject, ElementRef, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
3
3
  import * as i1$3 from '@angular/common';
4
4
  import { NgStyle, CommonModule, NgTemplateOutlet } from '@angular/common';
5
5
  import * as i1$2 from '@jsverse/transloco';
@@ -8,21 +8,27 @@ import * as i1 from '@angular/forms';
8
8
  import { ReactiveFormsModule } from '@angular/forms';
9
9
  import * as i1$1 from '@angular/platform-browser';
10
10
 
11
- var ButtonEnumColor;
12
- (function (ButtonEnumColor) {
13
- ButtonEnumColor["Orange"] = "orange";
14
- ButtonEnumColor["Dark"] = "dark";
15
- ButtonEnumColor["White"] = "white";
16
- ButtonEnumColor["Gray"] = "gray";
17
- ButtonEnumColor["Violet"] = "violet";
18
- })(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 = {}));
19
19
 
20
20
  class DdFlexDirectionDirective {
21
21
  ddFlexDirection = input('row', { ...(ngDevMode ? { debugName: "ddFlexDirection" } : {}) });
22
22
  gap = input(null, { ...(ngDevMode ? { debugName: "gap" } : {}) });
23
+ justifyContent = input('center', { ...(ngDevMode ? { debugName: "justifyContent" } : {}) });
24
+ alignItems = input('center', { ...(ngDevMode ? { debugName: "alignItems" } : {}) });
23
25
  display = 'flex';
24
- alignItems = 'center';
25
- justifyContent = 'center';
26
+ get alignItemsStyle() {
27
+ return this.alignItems();
28
+ }
29
+ get justify() {
30
+ return this.justifyContent();
31
+ }
26
32
  get flexDirection() {
27
33
  return this.ddFlexDirection() === 'col' ? 'column' : 'row';
28
34
  }
@@ -33,7 +39,7 @@ class DdFlexDirectionDirective {
33
39
  return typeof value === 'number' ? `${value}px` : value;
34
40
  }
35
41
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DdFlexDirectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
36
- 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 });
37
43
  }
38
44
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DdFlexDirectionDirective, decorators: [{
39
45
  type: Directive,
@@ -41,13 +47,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
41
47
  selector: '[ddFlex]',
42
48
  standalone: true,
43
49
  }]
44
- }], 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: [{
45
51
  type: HostBinding,
46
52
  args: ['style.display']
47
- }], alignItems: [{
53
+ }], alignItemsStyle: [{
48
54
  type: HostBinding,
49
55
  args: ['style.alignItems']
50
- }], justifyContent: [{
56
+ }], justify: [{
51
57
  type: HostBinding,
52
58
  args: ['style.justifyContent']
53
59
  }], flexDirection: [{
@@ -60,14 +66,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
60
66
 
61
67
  class ButtonBlurLift {
62
68
  textButton = input.required({ ...(ngDevMode ? { debugName: "textButton" } : {}) });
63
- colorButton = input(ButtonEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
69
+ colorButton = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
64
70
  padding = input(null, { ...(ngDevMode ? { debugName: "padding" } : {}) });
65
71
  hoverText = input(null, { ...(ngDevMode ? { debugName: "hoverText" } : {}) });
66
72
  buttonStyle = computed(() => {
67
73
  const color = this.colorButton();
68
74
  let bgColor, borderColor, hoverColor, activeColor, textColor, focusShadow;
69
75
  switch (color) {
70
- case ButtonEnumColor.Violet:
76
+ case AccentEnumColor.Violet:
71
77
  bgColor = 'var(--dd-base-secondary)';
72
78
  hoverColor = 'var(--dd-base-secondary)';
73
79
  activeColor = 'var(--dd-base-secondary)';
@@ -75,7 +81,7 @@ class ButtonBlurLift {
75
81
  focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';
76
82
  borderColor = 'var(--dd-base-secondary)';
77
83
  break;
78
- case ButtonEnumColor.Orange:
84
+ case AccentEnumColor.Orange:
79
85
  bgColor = 'var(--dd-base-accent-orange)';
80
86
  hoverColor = 'var(--dd-base-active-orange)';
81
87
  activeColor = 'var(--dd-base-accent-yellow)';
@@ -83,7 +89,7 @@ class ButtonBlurLift {
83
89
  focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';
84
90
  borderColor = 'var(--dd-base-active-orange)';
85
91
  break;
86
- case ButtonEnumColor.White:
92
+ case AccentEnumColor.White:
87
93
  bgColor = 'var(--dd-base-0)';
88
94
  hoverColor = 'var(--dd-base-100)';
89
95
  activeColor = 'var(--dd-base-200)';
@@ -91,7 +97,7 @@ class ButtonBlurLift {
91
97
  focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';
92
98
  borderColor = 'var(--dd-base-300)';
93
99
  break;
94
- case ButtonEnumColor.Gray:
100
+ case AccentEnumColor.Gray:
95
101
  bgColor = 'var(--dd-base-100)';
96
102
  hoverColor = 'var(--dd-base-200)';
97
103
  activeColor = 'var(--dd-base-200)';
@@ -99,7 +105,7 @@ class ButtonBlurLift {
99
105
  focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';
100
106
  borderColor = 'var(--dd-base-400)';
101
107
  break;
102
- case ButtonEnumColor.Dark:
108
+ case AccentEnumColor.Dark:
103
109
  bgColor = 'var(--dd-base-600)';
104
110
  hoverColor = 'var(--dd-base-400)';
105
111
  activeColor = 'var(--dd-base-300)';
@@ -123,7 +129,7 @@ class ButtonBlurLift {
123
129
  '--btn-hover-color': hoverColor,
124
130
  '--btn-active-color': activeColor,
125
131
  '--btn-text-color': textColor,
126
- '--btn-focus-shadow': focusShadow
132
+ '--btn-focus-shadow': focusShadow,
127
133
  };
128
134
  }, { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
129
135
  textLetters = computed(() => {
@@ -136,22 +142,22 @@ class ButtonBlurLift {
136
142
  return hover ? hover.split('').map((char) => (char === ' ' ? '\u00A0' : char)) : [];
137
143
  }, { ...(ngDevMode ? { debugName: "hoverTextLetters" } : {}) });
138
144
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlurLift, deps: [], target: i0.ɵɵFactoryTarget.Component });
139
- 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"] });
140
146
  }
141
147
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlurLift, decorators: [{
142
148
  type: Component,
143
- 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"] }]
144
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 }] }] } });
145
151
 
146
152
  class ButtonGlideOver {
147
153
  textButton = input.required({ ...(ngDevMode ? { debugName: "textButton" } : {}) });
148
- colorButton = input(ButtonEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
154
+ colorButton = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
149
155
  padding = input(null, { ...(ngDevMode ? { debugName: "padding" } : {}) });
150
156
  buttonStyle = computed(() => {
151
157
  const color = this.colorButton();
152
158
  let bgColor, borderColor, hoverColor, activeColor, textColor, focusShadow;
153
159
  switch (color) {
154
- case ButtonEnumColor.Violet:
160
+ case AccentEnumColor.Violet:
155
161
  bgColor = 'var(--dd-base-secondary)';
156
162
  hoverColor = 'var(--dd-base-secondary)';
157
163
  activeColor = 'var(--dd-base-secondary)';
@@ -159,7 +165,7 @@ class ButtonGlideOver {
159
165
  focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';
160
166
  borderColor = 'var(--dd-base-secondary)';
161
167
  break;
162
- case ButtonEnumColor.Orange:
168
+ case AccentEnumColor.Orange:
163
169
  bgColor = 'var(--dd-base-accent-orange)';
164
170
  hoverColor = 'var(--dd-base-active-orange)';
165
171
  activeColor = 'var(--dd-base-accent-yellow)';
@@ -167,7 +173,7 @@ class ButtonGlideOver {
167
173
  focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';
168
174
  borderColor = 'var(--dd-base-active-orange)';
169
175
  break;
170
- case ButtonEnumColor.White:
176
+ case AccentEnumColor.White:
171
177
  bgColor = 'var(--dd-base-0)';
172
178
  hoverColor = 'var(--dd-base-100)';
173
179
  activeColor = 'var(--dd-base-200)';
@@ -175,7 +181,7 @@ class ButtonGlideOver {
175
181
  focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';
176
182
  borderColor = 'var(--dd-base-300)';
177
183
  break;
178
- case ButtonEnumColor.Gray:
184
+ case AccentEnumColor.Gray:
179
185
  bgColor = 'var(--dd-base-100)';
180
186
  hoverColor = 'var(--dd-base-200)';
181
187
  activeColor = 'var(--dd-base-200)';
@@ -183,7 +189,7 @@ class ButtonGlideOver {
183
189
  focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';
184
190
  borderColor = 'var(--dd-base-400)';
185
191
  break;
186
- case ButtonEnumColor.Dark:
192
+ case AccentEnumColor.Dark:
187
193
  bgColor = 'var(--dd-base-600)';
188
194
  hoverColor = 'var(--dd-base-400)';
189
195
  activeColor = 'var(--dd-base-300)';
@@ -207,15 +213,15 @@ class ButtonGlideOver {
207
213
  '--btn-hover-color': hoverColor,
208
214
  '--btn-active-color': activeColor,
209
215
  '--btn-text-color': textColor,
210
- '--btn-focus-shadow': focusShadow
216
+ '--btn-focus-shadow': focusShadow,
211
217
  };
212
218
  }, { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
213
219
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonGlideOver, deps: [], target: i0.ɵɵFactoryTarget.Component });
214
- 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"] });
215
221
  }
216
222
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonGlideOver, decorators: [{
217
223
  type: Component,
218
- 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"] }]
219
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 }] }] } });
220
226
 
221
227
  class ButtonFlip {
@@ -223,28 +229,28 @@ class ButtonFlip {
223
229
  disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}) });
224
230
  arrowIndex = input(0, { ...(ngDevMode ? { debugName: "arrowIndex" } : {}) });
225
231
  direction = input(undefined, { ...(ngDevMode ? { debugName: "direction" } : {}) });
226
- colorButton = input(ButtonEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
232
+ colorButton = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
227
233
  buttonStyle = computed(() => {
228
234
  const color = this.colorButton();
229
235
  let textColor, bgColor;
230
236
  switch (color) {
231
- case ButtonEnumColor.Violet:
237
+ case AccentEnumColor.Violet:
232
238
  textColor = 'var(--dd-gray-0)';
233
239
  bgColor = 'var(--dd-base-secondary)';
234
240
  break;
235
- case ButtonEnumColor.Orange:
241
+ case AccentEnumColor.Orange:
236
242
  textColor = 'var(--dd-gray-0)';
237
243
  bgColor = 'var(--dd-base-accent-orange)';
238
244
  break;
239
- case ButtonEnumColor.White:
245
+ case AccentEnumColor.White:
240
246
  textColor = 'var(--dd-base-600)';
241
247
  bgColor = 'var(--dd-base-0)';
242
248
  break;
243
- case ButtonEnumColor.Gray:
249
+ case AccentEnumColor.Gray:
244
250
  textColor = 'var(--dd-base-600)';
245
251
  bgColor = 'var(--dd-base-100)';
246
252
  break;
247
- case ButtonEnumColor.Dark:
253
+ case AccentEnumColor.Dark:
248
254
  textColor = 'var(--dd-base-0)';
249
255
  bgColor = 'var(--dd-base-600)';
250
256
  break;
@@ -259,39 +265,39 @@ class ButtonFlip {
259
265
  };
260
266
  }, { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
261
267
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonFlip, deps: [], target: i0.ɵɵFactoryTarget.Component });
262
- 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"] });
263
269
  }
264
270
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonFlip, decorators: [{
265
271
  type: Component,
266
- 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"] }]
267
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 }] }] } });
268
274
 
269
275
  class ButtonCasper {
270
276
  isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : {}) });
271
277
  text = input('empty', { ...(ngDevMode ? { debugName: "text" } : {}) });
272
- colorButton = input(ButtonEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
278
+ colorButton = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
273
279
  buttonStyle = computed(() => {
274
280
  const color = this.colorButton();
275
281
  let baseColor;
276
282
  let accentColor;
277
283
  switch (color) {
278
- case ButtonEnumColor.Violet:
284
+ case AccentEnumColor.Violet:
279
285
  baseColor = 'var(--dd-base-secondary)';
280
286
  accentColor = 'var(--dd-gray-0)';
281
287
  break;
282
- case ButtonEnumColor.Orange:
288
+ case AccentEnumColor.Orange:
283
289
  baseColor = 'var(--dd-base-accent-orange)';
284
290
  accentColor = 'var(--dd-gray-0)';
285
291
  break;
286
- case ButtonEnumColor.White:
292
+ case AccentEnumColor.White:
287
293
  baseColor = 'var(--dd-base-600)';
288
294
  accentColor = 'var(--dd-base-0)';
289
295
  break;
290
- case ButtonEnumColor.Gray:
296
+ case AccentEnumColor.Gray:
291
297
  baseColor = 'var(--dd-base-300)';
292
298
  accentColor = 'var(--dd-base-600)';
293
299
  break;
294
- case ButtonEnumColor.Dark:
300
+ case AccentEnumColor.Dark:
295
301
  baseColor = 'var(--dd-base-600)';
296
302
  accentColor = 'var(--dd-base-0)';
297
303
  break;
@@ -306,40 +312,38 @@ class ButtonCasper {
306
312
  };
307
313
  }, { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
308
314
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonCasper, deps: [], target: i0.ɵɵFactoryTarget.Component });
309
- 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"] }] });
310
316
  }
311
317
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonCasper, decorators: [{
312
318
  type: Component,
313
- args: [{ selector: 'duck-dev-button-casper', standalone: true, imports: [
314
- NgStyle
315
- ], 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"] }]
316
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 }] }] } });
317
321
 
318
322
  class LoaderLoadingBubble {
319
323
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderLoadingBubble, deps: [], target: i0.ɵɵFactoryTarget.Component });
320
- 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"] });
321
325
  }
322
326
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderLoadingBubble, decorators: [{
323
327
  type: Component,
324
- 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"] }]
325
329
  }] });
326
330
 
327
331
  class LoaderClassic {
328
332
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
329
- 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"] });
330
334
  }
331
335
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderClassic, decorators: [{
332
336
  type: Component,
333
- 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"] }]
334
338
  }] });
335
339
 
336
340
  class LoaderThreeDots {
337
341
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderThreeDots, deps: [], target: i0.ɵɵFactoryTarget.Component });
338
- 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"] });
339
343
  }
340
344
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderThreeDots, decorators: [{
341
345
  type: Component,
342
- 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"] }]
343
347
  }] });
344
348
 
345
349
  class DuckDevTab {
@@ -360,11 +364,11 @@ class DuckDevTab {
360
364
  return this.activeTabIndex() === index;
361
365
  }
362
366
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
363
- 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 }] });
364
368
  }
365
369
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTab, decorators: [{
366
370
  type: Component,
367
- 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"] }]
368
372
  }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
369
373
 
370
374
  class DuckDevTabVertical {
@@ -407,56 +411,43 @@ class DuckDevTabVertical {
407
411
  return this.activeTabIndex() === index;
408
412
  }
409
413
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabVertical, deps: [], target: i0.ɵɵFactoryTarget.Component });
410
- 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 }] });
411
415
  }
412
416
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabVertical, decorators: [{
413
417
  type: Component,
414
- 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"] }]
415
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 }] }] } });
416
420
 
417
421
  class ButtonBlock {
418
- colorViolet = ButtonEnumColor.Violet;
419
- colorOrange = ButtonEnumColor.Orange;
420
- colorWhite = ButtonEnumColor.White;
421
- colorGray = ButtonEnumColor.Gray;
422
- colorDark = ButtonEnumColor.Dark;
422
+ colorViolet = AccentEnumColor.Violet;
423
+ colorOrange = AccentEnumColor.Orange;
424
+ colorWhite = AccentEnumColor.White;
425
+ colorGray = AccentEnumColor.Gray;
426
+ colorDark = AccentEnumColor.Dark;
423
427
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
424
- 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" }] });
425
429
  }
426
430
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlock, decorators: [{
427
431
  type: Component,
428
- args: [{ selector: 'app-button-block', imports: [
429
- ButtonBlurLift,
430
- ButtonGlideOver,
431
- TranslocoPipe,
432
- ButtonFlip,
433
- ButtonCasper
434
- ], 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"] }]
435
433
  }] });
436
434
 
437
435
  class LoaderBlock {
438
436
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
439
- 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" }] });
440
438
  }
441
439
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderBlock, decorators: [{
442
440
  type: Component,
443
- args: [{ selector: 'app-loader-block', imports: [
444
- LoaderClassic,
445
- LoaderLoadingBubble,
446
- LoaderThreeDots,
447
- TranslocoPipe
448
- ], 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"] }]
449
442
  }] });
450
443
 
451
444
  class TabsBlock {
452
445
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
453
- 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" }] });
454
447
  }
455
448
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, decorators: [{
456
449
  type: Component,
457
- args: [{ selector: 'app-tabs-block', imports: [
458
- TranslocoPipe
459
- ], 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"] }]
460
451
  }] });
461
452
 
462
453
  const duckDevDockMedium = `
@@ -1917,7 +1908,7 @@ const CUI_ICONS = {
1917
1908
  duckDevPaletteSm,
1918
1909
  duckDevLogOutMedium,
1919
1910
  duckDevEyeBold,
1920
- duckDevEyeBoldMedium
1911
+ duckDevEyeBoldMedium,
1921
1912
  };
1922
1913
 
1923
1914
  function camelToKebab(input) {
@@ -1929,12 +1920,14 @@ function camelToKebab(input) {
1929
1920
  }
1930
1921
  function titleFromKey(key) {
1931
1922
  const withoutPrefix = key.startsWith('duckDev') ? key.substring('duckDev'.length) : key;
1932
- 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');
1933
1926
  // Trim and capitalize first letter of each word (keep existing upper case like V2)
1934
1927
  return words
1935
1928
  .trim()
1936
1929
  .split(/\s+/)
1937
- .map(w => w.charAt(0).toUpperCase() + w.slice(1))
1930
+ .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
1938
1931
  .join(' ');
1939
1932
  }
1940
1933
  const svgIcons = Object.entries(CUI_ICONS).map(([key, svg]) => {
@@ -1956,13 +1949,11 @@ class DuckDevInput {
1956
1949
  formInputType = input('input', { ...(ngDevMode ? { debugName: "formInputType" } : {}) });
1957
1950
  errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
1958
1951
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
1959
- 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"] }] });
1960
1953
  }
1961
1954
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInput, decorators: [{
1962
1955
  type: Component,
1963
- args: [{ selector: 'duck-dev-input', imports: [
1964
- ReactiveFormsModule
1965
- ], 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"] }]
1966
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 }] }] } });
1967
1958
 
1968
1959
  class DuckDevNotificationService {
@@ -1979,7 +1970,7 @@ class DuckDevNotificationService {
1979
1970
  message: options.message,
1980
1971
  duration: options.duration ?? 3000,
1981
1972
  };
1982
- this.items.update(list => [item, ...list]);
1973
+ this.items.update((list) => [item, ...list]);
1983
1974
  if (item.duration > 0) {
1984
1975
  const t = window.setTimeout(() => this.remove(id), item.duration + 350);
1985
1976
  this.timers.set(id, t);
@@ -2001,10 +1992,10 @@ class DuckDevNotificationService {
2001
1992
  clearTimeout(timer);
2002
1993
  this.timers.delete(id);
2003
1994
  }
2004
- this.items.update(list => list.filter(i => i.id !== id));
1995
+ this.items.update((list) => list.filter((i) => i.id !== id));
2005
1996
  }
2006
1997
  clear() {
2007
- this.items().forEach(i => this.remove(i.id));
1998
+ this.items().forEach((i) => this.remove(i.id));
2008
1999
  }
2009
2000
  defaultTitle(type) {
2010
2001
  switch (type) {
@@ -2040,7 +2031,7 @@ class DuckDevSvgBlock {
2040
2031
  const q = this.search().trim().toLowerCase();
2041
2032
  if (!q)
2042
2033
  return this.icons;
2043
- 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));
2044
2035
  }, { ...(ngDevMode ? { debugName: "filteredIcons" } : {}) });
2045
2036
  totalPages = computed(() => {
2046
2037
  const total = this.filteredIcons().length;
@@ -2109,22 +2100,20 @@ class DuckDevSvgBlock {
2109
2100
  this.page.set(p + 1);
2110
2101
  }
2111
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 });
2112
- 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" }] });
2113
2104
  }
2114
2105
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSvgBlock, decorators: [{
2115
2106
  type: Component,
2116
- 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"] }]
2117
2108
  }], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: i1.FormBuilder }] });
2118
2109
 
2119
2110
  class InputBlock {
2120
2111
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
2121
- 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" }] });
2122
2113
  }
2123
2114
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputBlock, decorators: [{
2124
2115
  type: Component,
2125
- args: [{ selector: 'app-input-block', imports: [
2126
- TranslocoPipe
2127
- ], 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"] }]
2128
2117
  }] });
2129
2118
 
2130
2119
  class NotificationBlock {
@@ -2136,35 +2125,57 @@ class NotificationBlock {
2136
2125
  this.notify.success('All changes have been saved.', { title: 'Success', position: 'top' });
2137
2126
  }
2138
2127
  warningCenter() {
2139
- 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
+ });
2140
2133
  }
2141
2134
  errorBottom() {
2142
2135
  this.notify.error('Something went wrong.', { title: 'Error', position: 'bottom' });
2143
2136
  }
2144
2137
  // Additional demos
2145
2138
  showTop() {
2146
- 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
+ });
2147
2146
  }
2148
2147
  showCenterNoAuto() {
2149
- 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
+ });
2150
2155
  }
2151
2156
  showBottomLong() {
2152
- 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
+ });
2153
2164
  }
2154
2165
  clearAll() {
2155
2166
  this.notify.clear();
2156
2167
  }
2157
2168
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NotificationBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
2158
- 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" }] });
2159
2170
  }
2160
2171
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NotificationBlock, decorators: [{
2161
2172
  type: Component,
2162
- 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"] }]
2163
2174
  }] });
2164
2175
 
2165
2176
  class DuckDevIcon {
2166
2177
  sanitizer;
2167
- static iconMap = new Map(svgIcons.map(i => [i.id, i.svg]));
2178
+ static iconMap = new Map(svgIcons.map((i) => [i.id, i.svg]));
2168
2179
  name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}) });
2169
2180
  constructor(sanitizer) {
2170
2181
  this.sanitizer = sanitizer;
@@ -2175,15 +2186,11 @@ class DuckDevIcon {
2175
2186
  return this.sanitizer.bypassSecurityTrustHtml(svg);
2176
2187
  }, { ...(ngDevMode ? { debugName: "svgHtml" } : {}) });
2177
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 });
2178
- 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: `
2179
- <span class="duck-dev-icon" [innerHTML]="svgHtml()"></span>
2180
- `, 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"] });
2181
2190
  }
2182
2191
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevIcon, decorators: [{
2183
2192
  type: Component,
2184
- args: [{ selector: 'duck-dev-icon', standalone: true, template: `
2185
- <span class="duck-dev-icon" [innerHTML]="svgHtml()"></span>
2186
- `, 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"] }]
2187
2194
  }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
2188
2195
 
2189
2196
  class DuckDevNotification {
@@ -2221,11 +2228,11 @@ class DuckDevNotification {
2221
2228
  }
2222
2229
  }
2223
2230
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevNotification, deps: [], target: i0.ɵɵFactoryTarget.Component });
2224
- 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"] }] });
2225
2232
  }
2226
2233
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevNotification, decorators: [{
2227
2234
  type: Component,
2228
- 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"] }]
2229
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"] }] } });
2230
2237
 
2231
2238
  class DuckDevNotificationContainer {
@@ -2292,84 +2299,134 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
2292
2299
 
2293
2300
  class Badge {
2294
2301
  text = input('', { ...(ngDevMode ? { debugName: "text" } : {}) });
2295
- color = input(ButtonEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
2302
+ color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
2296
2303
  variant = input('solid', { ...(ngDevMode ? { debugName: "variant" } : {}) });
2297
2304
  size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
2298
2305
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Badge, deps: [], target: i0.ɵɵFactoryTarget.Component });
2299
- 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"] }] });
2300
2307
  }
2301
2308
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Badge, decorators: [{
2302
2309
  type: Component,
2303
- args: [{ selector: 'dd-badge', standalone: true, imports: [
2304
- DdFlexDirectionDirective
2305
- ], 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"] }]
2306
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 }] }] } });
2307
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
+
2308
2352
  class BadgeBlock {
2309
- colorViolet = ButtonEnumColor.Violet;
2310
- colorOrange = ButtonEnumColor.Orange;
2311
- colorWhite = ButtonEnumColor.White;
2312
- colorGray = ButtonEnumColor.Gray;
2313
- 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
+ }
2314
2377
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
2315
- 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" }] });
2316
2379
  }
2317
2380
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, decorators: [{
2318
2381
  type: Component,
2319
- args: [{ selector: 'app-badge-block', standalone: true, imports: [
2320
- Badge,
2321
- TranslocoPipe
2322
- ], 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"] }]
2323
- }] });
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: () => [] });
2324
2384
 
2325
2385
  class DirectiveBlock {
2326
2386
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DirectiveBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
2327
- 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" }] });
2328
2388
  }
2329
2389
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DirectiveBlock, decorators: [{
2330
2390
  type: Component,
2331
- 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"] }]
2332
2392
  }] });
2333
2393
 
2334
2394
  class DuckDevAccordionComponent {
2335
2395
  content = input.required({ ...(ngDevMode ? { debugName: "content" } : {}) });
2336
2396
  title = input.required({ ...(ngDevMode ? { debugName: "title" } : {}) });
2337
- color = input(ButtonEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
2397
+ color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
2338
2398
  isOpen = signal(false, { ...(ngDevMode ? { debugName: "isOpen" } : {}) });
2339
2399
  toggle() {
2340
2400
  this.isOpen.update((prev) => !prev);
2341
2401
  }
2342
2402
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2343
- 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 });
2344
2404
  }
2345
2405
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionComponent, decorators: [{
2346
2406
  type: Component,
2347
- args: [{ selector: 'duck-dev-accordion', standalone: true, imports: [
2348
- NgTemplateOutlet,
2349
- DuckDevIcon
2350
- ], 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"] }]
2351
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 }] }] } });
2352
2409
 
2353
2410
  class AccordionBlock {
2354
- colorViolet = ButtonEnumColor.Violet;
2355
- colorOrange = ButtonEnumColor.Orange;
2356
- colorWhite = ButtonEnumColor.White;
2357
- colorGray = ButtonEnumColor.Gray;
2358
- colorDark = ButtonEnumColor.Dark;
2411
+ colorViolet = AccentEnumColor.Violet;
2412
+ colorOrange = AccentEnumColor.Orange;
2413
+ colorWhite = AccentEnumColor.White;
2414
+ colorGray = AccentEnumColor.Gray;
2415
+ colorDark = AccentEnumColor.Dark;
2359
2416
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
2360
- 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" }] });
2361
2418
  }
2362
2419
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionBlock, decorators: [{
2363
2420
  type: Component,
2364
- 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"] }]
2365
2422
  }] });
2366
2423
 
2367
- class SliderClassic {
2424
+ class SliderFlip {
2368
2425
  cdr = inject(ChangeDetectorRef);
2369
2426
  items = input.required({ ...(ngDevMode ? { debugName: "items" } : {}) });
2370
2427
  intervalMs = input(3000, { ...(ngDevMode ? { debugName: "intervalMs" } : {}) });
2371
2428
  autoplay = input(true, { ...(ngDevMode ? { debugName: "autoplay" } : {}) });
2372
- color = input(ButtonEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
2429
+ color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
2373
2430
  currentIndex = 0;
2374
2431
  previousIndex = null;
2375
2432
  isAnimating = false;
@@ -2420,14 +2477,53 @@ class SliderClassic {
2420
2477
  this.previousIndex = null;
2421
2478
  this.animateIn = false;
2422
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
+ }
2423
2519
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
2424
- 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\">\n @if(isAnimating && previousIndex !== null){\n <div class=\"slide blurred\">\n <ng-container [ngTemplateOutlet]=\"items()[previousIndex]\"></ng-container>\n </div>\n }\n <div class=\"slide\" [class.current]=\"!isAnimating || animateIn\" [class.animate-in]=\"animateIn\" (transitionend)=\"onTransitionEnd($event)\">\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);position:relative;overflow:hidden;margin:0 auto}.slides{position:relative;width:100%}.slide{position:relative;width:100%;opacity:0;filter:none;transform:translateZ(0) scale(.96) translateY(16px);transition:opacity .15s cubic-bezier(.22,1,.36,1),filter .15s cubic-bezier(.22,1,.36,1),transform .15s cubic-bezier(.22,1,.36,1)}.slide.current{opacity:1;transform:translateZ(0) scale(1) translateY(0)}.slide.animate-in{opacity:1;filter:blur(0);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"] }] });
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"] }] });
2425
2521
  }
2426
2522
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderClassic, decorators: [{
2427
2523
  type: Component,
2428
- args: [{ selector: 'dd-slider-classic', standalone: true, imports: [CommonModule, DuckDevIcon], host: {
2429
- '[style.display]': '"block"'
2430
- }, 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 class=\"slide\" [class.current]=\"!isAnimating || animateIn\" [class.animate-in]=\"animateIn\" (transitionend)=\"onTransitionEnd($event)\">\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);position:relative;overflow:hidden;margin:0 auto}.slides{position:relative;width:100%}.slide{position:relative;width:100%;opacity:0;filter:none;transform:translateZ(0) scale(.96) translateY(16px);transition:opacity .15s cubic-bezier(.22,1,.36,1),filter .15s cubic-bezier(.22,1,.36,1),transform .15s cubic-bezier(.22,1,.36,1)}.slide.current{opacity:1;transform:translateZ(0) scale(1) translateY(0)}.slide.animate-in{opacity:1;filter:blur(0);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"] }]
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"] }]
2431
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 }] }] } });
2432
2528
 
2433
2529
  class SliderBlock {
@@ -2437,13 +2533,51 @@ class SliderBlock {
2437
2533
  this.slides.set([...this.slideTemplates()]);
2438
2534
  }
2439
2535
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
2440
- 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-classic\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><strong>items</strong> ({{ 'slider.required' | transloco }}) - {{ 'slider.raindrops.inputItems' | transloco }}</li>\n <li><strong>intervalMs</strong> - {{ 'slider.raindrops.inputInterval' | transloco }}</li>\n <li><strong>autoplay</strong> - {{ 'slider.raindrops.inputAutoplay' | transloco }}</li>\n <li><strong>color</strong> - Button palette color (e.g. 'White'). Used for styling consistency.</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\">Build delightful interfaces faster</h3>\n <p class=\"dd-doc-slide__subtitle\">Duck Dev UI provides accessible, themeable components with sensible defaults so you can ship quickly.</p>\n <a class=\"dd-doc-slide__cta\" href=\"#components\" aria-label=\"Explore components\">Explore components</a>\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>Accessible</h4>\n <p>Keyboard-friendly and ARIA\u2011aware out of the box.</p>\n </li>\n <li class=\"dd-doc-feature\">\n <h4>Themeable</h4>\n <p>Uses CSS variables to match your brand palette.</p>\n </li>\n <li class=\"dd-doc-feature\">\n <h4>Lightweight</h4>\n <p>Small, focused components with zero heavy deps.</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\">Quick start</h4>\n <pre class=\"dd-doc-code\"><code>&lt;dd-slider-classic\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"&gt;\n&lt;/dd-slider-classic&gt;</code></pre>\n <p class=\"dd-doc-note\">Tip: Use templates to pass rich content into each slide.</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-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);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: SliderClassic, selector: "dd-slider-classic", inputs: ["items", "intervalMs", "autoplay", "color"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
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%;aspect-ratio:16/9;max-height:min(60vh,420px)}.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" }] });
2441
2537
  }
2442
2538
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderBlock, decorators: [{
2443
2539
  type: Component,
2444
- args: [{ selector: 'app-slider-block', standalone: true, imports: [TranslocoPipe, 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-classic\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><strong>items</strong> ({{ 'slider.required' | transloco }}) - {{ 'slider.raindrops.inputItems' | transloco }}</li>\n <li><strong>intervalMs</strong> - {{ 'slider.raindrops.inputInterval' | transloco }}</li>\n <li><strong>autoplay</strong> - {{ 'slider.raindrops.inputAutoplay' | transloco }}</li>\n <li><strong>color</strong> - Button palette color (e.g. 'White'). Used for styling consistency.</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\">Build delightful interfaces faster</h3>\n <p class=\"dd-doc-slide__subtitle\">Duck Dev UI provides accessible, themeable components with sensible defaults so you can ship quickly.</p>\n <a class=\"dd-doc-slide__cta\" href=\"#components\" aria-label=\"Explore components\">Explore components</a>\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>Accessible</h4>\n <p>Keyboard-friendly and ARIA\u2011aware out of the box.</p>\n </li>\n <li class=\"dd-doc-feature\">\n <h4>Themeable</h4>\n <p>Uses CSS variables to match your brand palette.</p>\n </li>\n <li class=\"dd-doc-feature\">\n <h4>Lightweight</h4>\n <p>Small, focused components with zero heavy deps.</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\">Quick start</h4>\n <pre class=\"dd-doc-code\"><code>&lt;dd-slider-classic\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"&gt;\n&lt;/dd-slider-classic&gt;</code></pre>\n <p class=\"dd-doc-note\">Tip: Use templates to pass rich content into each slide.</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-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);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"] }]
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%;aspect-ratio:16/9;max-height:min(60vh,420px)}.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"] }]
2445
2541
  }], propDecorators: { slideTemplates: [{ type: i0.ViewChildren, args: ['slide', { isSignal: true }] }] } });
2446
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
+
2447
2581
  class MainDocumentationPage {
2448
2582
  translocoService = inject(TranslocoService);
2449
2583
  title = signal('demo', { ...(ngDevMode ? { debugName: "title" } : {}) });
@@ -2454,17 +2588,18 @@ class MainDocumentationPage {
2454
2588
  { id: 'tabs', label: this.translocoService.translate('tabs.tabs') },
2455
2589
  { id: 'badge', label: this.translocoService.translate('tabs.badge') },
2456
2590
  { id: 'directives', label: this.translocoService.translate('tabs.directives') },
2591
+ { id: 'card', label: this.translocoService.translate('tabs.card') },
2457
2592
  { id: 'input', label: this.translocoService.translate('tabs.input') },
2458
2593
  { id: 'notifications', label: this.translocoService.translate('tabs.notifications') },
2459
2594
  { id: 'slider', label: this.translocoService.translate('tabs.slider') },
2460
- { id: 'svg', label: this.translocoService.translate('tabs.svg') }
2595
+ { id: 'svg', label: this.translocoService.translate('tabs.svg') },
2461
2596
  ];
2462
2597
  activeTab = signal(this.tabs[0], { ...(ngDevMode ? { debugName: "activeTab" } : {}) });
2463
2598
  onTabChange(tab) {
2464
2599
  this.activeTab.set(tab);
2465
2600
  }
2466
2601
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
2467
- 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 ('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" }] });
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" }] });
2468
2603
  }
2469
2604
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, decorators: [{
2470
2605
  type: Component,
@@ -2480,13 +2615,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
2480
2615
  BadgeBlock,
2481
2616
  DirectiveBlock,
2482
2617
  AccordionBlock,
2483
- SliderBlock
2484
- ], 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 ('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"] }]
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"] }]
2485
2621
  }] });
2486
2622
 
2487
2623
  const DuckDevLibTranslations = {
2488
- en: import('./duck-dev-lib-en-4OEFIyu1.mjs'),
2489
- ru: import('./duck-dev-lib-ru-CcBIFkk3.mjs')
2624
+ en: import('./duck-dev-lib-en-mOVobVPA.mjs'),
2625
+ ru: import('./duck-dev-lib-ru-Vu8xDdcB.mjs'),
2490
2626
  };
2491
2627
 
2492
2628
  /*
@@ -2497,5 +2633,5 @@ const DuckDevLibTranslations = {
2497
2633
  * Generated bundle index. Do not edit.
2498
2634
  */
2499
2635
 
2500
- export { Badge, ButtonBlurLift, ButtonCasper, ButtonEnumColor, ButtonFlip, ButtonGlideOver, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevIcon, DuckDevInput, DuckDevLibTranslations, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevTab, DuckDevTabVertical, LoaderClassic, LoaderLoadingBubble, LoaderThreeDots, MainDocumentationPage, SliderClassic };
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 };
2501
2637
  //# sourceMappingURL=duck-dev-lib.mjs.map