duck-dev-lib 0.0.8 → 0.0.10
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.
- package/fesm2022/duck-dev-lib-en-Bp-dlVHg.mjs +121 -0
- package/fesm2022/duck-dev-lib-en-Bp-dlVHg.mjs.map +1 -0
- package/fesm2022/duck-dev-lib-ru-BESv0nFL.mjs +121 -0
- package/fesm2022/duck-dev-lib-ru-BESv0nFL.mjs.map +1 -0
- package/fesm2022/duck-dev-lib.mjs +91 -17
- package/fesm2022/duck-dev-lib.mjs.map +1 -1
- package/package.json +1 -1
- package/types/duck-dev-lib.d.ts +26 -13
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
var tabs = {
|
|
2
|
+
buttons: "Buttons",
|
|
3
|
+
loaders: "Loaders",
|
|
4
|
+
tabs: "Tabs"
|
|
5
|
+
};
|
|
6
|
+
var buttons = {
|
|
7
|
+
title: "Duck Dev UI Library - Button Components",
|
|
8
|
+
glideOver: {
|
|
9
|
+
title: "Button Glide Over",
|
|
10
|
+
description: "Button with animated arrow that \"slides out\" on hover. Perfect for calls to action (CTA) and navigation elements.",
|
|
11
|
+
usage: "Usage:",
|
|
12
|
+
inputs: "Input Parameters:",
|
|
13
|
+
inputTextButton: "button text",
|
|
14
|
+
inputColorButton: "color scheme (White, Gray, Dark, Violet, Orange). Default: White",
|
|
15
|
+
inputPadding: "internal padding. Default: '10px 24px'",
|
|
16
|
+
required: "required",
|
|
17
|
+
examples: "Examples:",
|
|
18
|
+
exampleWhite: "White (default)",
|
|
19
|
+
exampleViolet: "Violet",
|
|
20
|
+
exampleOrange: "Orange",
|
|
21
|
+
exampleGray: "Gray",
|
|
22
|
+
exampleDark: "Dark"
|
|
23
|
+
},
|
|
24
|
+
blurLift: {
|
|
25
|
+
title: "Button Blur Lift",
|
|
26
|
+
description: "Button with blur effect and text \"lifting\" on hover. On hover, the main text blurs and alternative text appears. Perfect for interactive elements with dual messages.",
|
|
27
|
+
usage: "Usage:",
|
|
28
|
+
inputs: "Input Parameters:",
|
|
29
|
+
inputTextButton: "main button text",
|
|
30
|
+
inputHoverText: "text that appears on hover. If not specified, textButton is used",
|
|
31
|
+
inputColorButton: "color scheme (White, Gray, Dark, Violet, Orange). Default: White",
|
|
32
|
+
inputPadding: "internal padding. Default: '10px 24px'",
|
|
33
|
+
required: "required",
|
|
34
|
+
examples: "Examples:",
|
|
35
|
+
exampleWhiteHover: "White with hover text",
|
|
36
|
+
exampleViolet: "Violet",
|
|
37
|
+
exampleOrange: "Orange",
|
|
38
|
+
exampleGray: "Gray",
|
|
39
|
+
exampleDark: "Dark"
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
var loaders = {
|
|
43
|
+
title: "Duck Dev UI Library - Loader Components",
|
|
44
|
+
classic: {
|
|
45
|
+
title: "Loader Classic",
|
|
46
|
+
description: "Classic animated spinner with rotating circular border. Perfect for indicating content loading, asynchronous operations, and waiting for server responses.",
|
|
47
|
+
usage: "Usage:",
|
|
48
|
+
inputs: "Input Parameters:",
|
|
49
|
+
inputNone: "Component has no input parameters",
|
|
50
|
+
inputCss: "Size and color can be configured via CSS variables",
|
|
51
|
+
examples: "Examples:",
|
|
52
|
+
exampleStandard: "Standard view"
|
|
53
|
+
},
|
|
54
|
+
textBubble: {
|
|
55
|
+
title: "Loader Text Bubble",
|
|
56
|
+
description: "Animated loader with \"Load ng\" text and bubble effect. Perfect for creating unique visual experience when loading Angular applications. Text animates with appearance and color change effects.",
|
|
57
|
+
usage: "Usage:",
|
|
58
|
+
inputs: "Input Parameters:",
|
|
59
|
+
inputNone: "Component has no input parameters",
|
|
60
|
+
inputFixed: "Displays fixed text \"Load ng\"",
|
|
61
|
+
inputCss: "Styling via CSS",
|
|
62
|
+
examples: "Examples:",
|
|
63
|
+
exampleStandard: "Standard view"
|
|
64
|
+
},
|
|
65
|
+
threeDots: {
|
|
66
|
+
title: "Loader Three Dots",
|
|
67
|
+
description: "Loader with three dots animation. Simple and minimalist loading indicator that works well in limited space. (Component in development)",
|
|
68
|
+
usage: "Usage:",
|
|
69
|
+
inputs: "Input Parameters:",
|
|
70
|
+
inputNone: "Component has no input parameters",
|
|
71
|
+
inputCss: "Configuration via CSS",
|
|
72
|
+
examples: "Examples:"
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
var tabsComponent = {
|
|
76
|
+
title: "Duck Dev UI Library - Tabs Component",
|
|
77
|
+
tab: {
|
|
78
|
+
title: "Duck Dev Tab",
|
|
79
|
+
description: "Tab component with animated transitions between content. Supports signal-based input/output, automatic switching with left/right animation depending on direction. Perfect for organizing content into categories and creating interactive interfaces.",
|
|
80
|
+
usage: "Usage:",
|
|
81
|
+
usageText1: "To use the component, import DuckDevTab and DuckDevTabItem from 'duck-dev-lib' library.",
|
|
82
|
+
usageText2: "Create an array of tabs with id and label fields, pass it to the component via input [tabs].",
|
|
83
|
+
usageText3: "Use ng-content to place tab content inside the component.",
|
|
84
|
+
inputs: "Input Parameters:",
|
|
85
|
+
inputTabs: "array of objects of type DuckDevTabItem[] with fields:",
|
|
86
|
+
inputTabsId: "unique tab identifier",
|
|
87
|
+
inputTabsLabel: "text on tab button",
|
|
88
|
+
inputTabsContent: "additional data",
|
|
89
|
+
required: "required",
|
|
90
|
+
optional: "optional",
|
|
91
|
+
outputs: "Output Events:",
|
|
92
|
+
outputTabChange: "event that fires when switching tabs. Returns the current active tab object (DuckDevTabItem)",
|
|
93
|
+
features: "Features:",
|
|
94
|
+
feature1: "Animated transitions between tabs (slide left/right)",
|
|
95
|
+
feature2: "Animated active tab indicator",
|
|
96
|
+
feature3: "Signal-based architecture (input/output functions instead of decorators)",
|
|
97
|
+
feature4: "Automatic animation direction detection",
|
|
98
|
+
feature5: "ng-content support for content placement",
|
|
99
|
+
feature6: "Modern Angular syntax (new directives)",
|
|
100
|
+
feature7: "Responsive design",
|
|
101
|
+
api: "TypeScript interface DuckDevTabItem:",
|
|
102
|
+
apiId: "unique tab identifier",
|
|
103
|
+
apiLabel: "text on tab button",
|
|
104
|
+
apiContent: "optional additional data",
|
|
105
|
+
implementation: "Integration Example:",
|
|
106
|
+
implementation1: "Import DuckDevTab and DuckDevTabItem from 'duck-dev-lib'",
|
|
107
|
+
implementation2: "Create an array of tabs in the component",
|
|
108
|
+
implementation3: "Use signal to store active tab",
|
|
109
|
+
implementation4: "Handle tabChange event to switch content",
|
|
110
|
+
implementation5: "Place tab content inside the component using conditional blocks"
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
var en = {
|
|
114
|
+
tabs: tabs,
|
|
115
|
+
buttons: buttons,
|
|
116
|
+
loaders: loaders,
|
|
117
|
+
tabsComponent: tabsComponent
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
export { buttons, en as default, loaders, tabs, tabsComponent };
|
|
121
|
+
//# sourceMappingURL=duck-dev-lib-en-Bp-dlVHg.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"duck-dev-lib-en-Bp-dlVHg.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
var tabs = {
|
|
2
|
+
buttons: "Кнопки",
|
|
3
|
+
loaders: "Загрузчики",
|
|
4
|
+
tabs: "Вкладки"
|
|
5
|
+
};
|
|
6
|
+
var buttons = {
|
|
7
|
+
title: "Duck Dev UI Library - Компоненты кнопок",
|
|
8
|
+
glideOver: {
|
|
9
|
+
title: "Button Glide Over",
|
|
10
|
+
description: "Кнопка с анимированной стрелкой, которая \"выезжает\" при наведении. Идеально подходит для призывов к действию (CTA) и навигационных элементов.",
|
|
11
|
+
usage: "Использование:",
|
|
12
|
+
inputs: "Входные параметры:",
|
|
13
|
+
inputTextButton: "текст на кнопке",
|
|
14
|
+
inputColorButton: "цветовая схема (White, Gray, Dark, Violet, Orange). По умолчанию: White",
|
|
15
|
+
inputPadding: "внутренние отступы. По умолчанию: '10px 24px'",
|
|
16
|
+
required: "обязательный",
|
|
17
|
+
examples: "Примеры:",
|
|
18
|
+
exampleWhite: "White (по умолчанию)",
|
|
19
|
+
exampleViolet: "Violet",
|
|
20
|
+
exampleOrange: "Orange",
|
|
21
|
+
exampleGray: "Gray",
|
|
22
|
+
exampleDark: "Dark"
|
|
23
|
+
},
|
|
24
|
+
blurLift: {
|
|
25
|
+
title: "Button Blur Lift",
|
|
26
|
+
description: "Кнопка с эффектом размытия и \"подъема\" текста при наведении. При наведении основной текст размывается и появляется альтернативный текст. Отлично подходит для интерактивных элементов с двойным сообщением.",
|
|
27
|
+
usage: "Использование:",
|
|
28
|
+
inputs: "Входные параметры:",
|
|
29
|
+
inputTextButton: "основной текст кнопки",
|
|
30
|
+
inputHoverText: "текст, который появляется при наведении. Если не указан, используется textButton",
|
|
31
|
+
inputColorButton: "цветовая схема (White, Gray, Dark, Violet, Orange). По умолчанию: White",
|
|
32
|
+
inputPadding: "внутренние отступы. По умолчанию: '10px 24px'",
|
|
33
|
+
required: "обязательный",
|
|
34
|
+
examples: "Примеры:",
|
|
35
|
+
exampleWhiteHover: "White с hover текстом",
|
|
36
|
+
exampleViolet: "Violet",
|
|
37
|
+
exampleOrange: "Orange",
|
|
38
|
+
exampleGray: "Gray",
|
|
39
|
+
exampleDark: "Dark"
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
var loaders = {
|
|
43
|
+
title: "Duck Dev UI Library - Компоненты загрузки (Loaders)",
|
|
44
|
+
classic: {
|
|
45
|
+
title: "Loader Classic",
|
|
46
|
+
description: "Классический анимированный спиннер с вращающейся круговой границей. Идеально подходит для индикации загрузки контента, асинхронных операций и ожидания ответа от сервера.",
|
|
47
|
+
usage: "Использование:",
|
|
48
|
+
inputs: "Входные параметры:",
|
|
49
|
+
inputNone: "Компонент не имеет входных параметров",
|
|
50
|
+
inputCss: "Размер и цвет можно настроить через CSS переменные",
|
|
51
|
+
examples: "Примеры:",
|
|
52
|
+
exampleStandard: "Стандартный вид"
|
|
53
|
+
},
|
|
54
|
+
textBubble: {
|
|
55
|
+
title: "Loader Text Bubble",
|
|
56
|
+
description: "Анимированный загрузчик с текстом \"Load ng\" и эффектом пузырей. Отлично подходит для создания уникального визуального опыта при загрузке Angular-приложений. Текст анимируется с эффектом появления и изменения цвета.",
|
|
57
|
+
usage: "Использование:",
|
|
58
|
+
inputs: "Входные параметры:",
|
|
59
|
+
inputNone: "Компонент не имеет входных параметров",
|
|
60
|
+
inputFixed: "Отображает фиксированный текст \"Load ng\"",
|
|
61
|
+
inputCss: "Стилизация через CSS",
|
|
62
|
+
examples: "Примеры:",
|
|
63
|
+
exampleStandard: "Стандартный вид"
|
|
64
|
+
},
|
|
65
|
+
threeDots: {
|
|
66
|
+
title: "Loader Three Dots",
|
|
67
|
+
description: "Загрузчик с анимацией трех точек. Простой и минималистичный индикатор загрузки, который хорошо работает в ограниченном пространстве. (Компонент в разработке)",
|
|
68
|
+
usage: "Использование:",
|
|
69
|
+
inputs: "Входные параметры:",
|
|
70
|
+
inputNone: "Компонент не имеет входных параметров",
|
|
71
|
+
inputCss: "Настройка через CSS",
|
|
72
|
+
examples: "Примеры:"
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
var tabsComponent = {
|
|
76
|
+
title: "Duck Dev UI Library - Компонент вкладок (Tabs)",
|
|
77
|
+
tab: {
|
|
78
|
+
title: "Duck Dev Tab",
|
|
79
|
+
description: "Компонент вкладок с анимированными переходами между контентом. Поддерживает signal-based input/output, автоматическое переключение с анимацией влево/вправо в зависимости от направления. Идеально подходит для организации контента в категории и создания интерактивных интерфейсов.",
|
|
80
|
+
usage: "Использование:",
|
|
81
|
+
usageText1: "Для использования компонента импортируйте DuckDevTab и DuckDevTabItem из библиотеки 'duck-dev-lib'.",
|
|
82
|
+
usageText2: "Создайте массив вкладок с полями id и label, передайте его в компонент через input [tabs].",
|
|
83
|
+
usageText3: "Используйте ng-content для размещения контента вкладок внутри компонента.",
|
|
84
|
+
inputs: "Входные параметры:",
|
|
85
|
+
inputTabs: "массив объектов типа DuckDevTabItem[] с полями:",
|
|
86
|
+
inputTabsId: "уникальный идентификатор вкладки",
|
|
87
|
+
inputTabsLabel: "текст на кнопке вкладки",
|
|
88
|
+
inputTabsContent: "дополнительные данные",
|
|
89
|
+
required: "обязательный",
|
|
90
|
+
optional: "опционально",
|
|
91
|
+
outputs: "Выходные события:",
|
|
92
|
+
outputTabChange: "событие, которое срабатывает при переключении вкладки. Возвращает объект текущей активной вкладки (DuckDevTabItem)",
|
|
93
|
+
features: "Особенности:",
|
|
94
|
+
feature1: "Анимированные переходы между вкладками (слайд влево/вправо)",
|
|
95
|
+
feature2: "Анимированный индикатор активной вкладки",
|
|
96
|
+
feature3: "Signal-based архитектура (input/output функции вместо декораторов)",
|
|
97
|
+
feature4: "Автоматическое определение направления анимации",
|
|
98
|
+
feature5: "Поддержка ng-content для размещения контента",
|
|
99
|
+
feature6: "Современный синтаксис Angular (новые директивы)",
|
|
100
|
+
feature7: "Адаптивный дизайн",
|
|
101
|
+
api: "TypeScript интерфейс DuckDevTabItem:",
|
|
102
|
+
apiId: "уникальный идентификатор вкладки",
|
|
103
|
+
apiLabel: "текст на кнопке вкладки",
|
|
104
|
+
apiContent: "опциональные дополнительные данные",
|
|
105
|
+
implementation: "Пример интеграции:",
|
|
106
|
+
implementation1: "Импортируйте DuckDevTab и DuckDevTabItem из 'duck-dev-lib'",
|
|
107
|
+
implementation2: "Создайте массив вкладок в компоненте",
|
|
108
|
+
implementation3: "Используйте signal для хранения активной вкладки",
|
|
109
|
+
implementation4: "Обработайте событие tabChange для переключения контента",
|
|
110
|
+
implementation5: "Разместите контент вкладок внутри компонента используя условные блоки"
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
var ru = {
|
|
114
|
+
tabs: tabs,
|
|
115
|
+
buttons: buttons,
|
|
116
|
+
loaders: loaders,
|
|
117
|
+
tabsComponent: tabsComponent
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
export { buttons, ru as default, loaders, tabs, tabsComponent };
|
|
121
|
+
//# sourceMappingURL=duck-dev-lib-ru-BESv0nFL.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"duck-dev-lib-ru-BESv0nFL.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed, Component, output, signal } from '@angular/core';
|
|
2
|
+
import { input, computed, Component, output, signal, inject } from '@angular/core';
|
|
3
3
|
import { CommonModule } from '@angular/common';
|
|
4
|
+
import { TranslocoPipe, TranslocoService } from '@jsverse/transloco';
|
|
4
5
|
|
|
5
6
|
var ButtonEnumColor;
|
|
6
7
|
(function (ButtonEnumColor) {
|
|
@@ -171,6 +172,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
171
172
|
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-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-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 #00000040}.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"] }]
|
|
172
173
|
}], 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 }] }] } });
|
|
173
174
|
|
|
175
|
+
class LoaderLoadingBubble {
|
|
176
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderLoadingBubble, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
177
|
+
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 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-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-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:70px;bottom:10px;height:28px;width:5.15px;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"] });
|
|
178
|
+
}
|
|
179
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderLoadingBubble, decorators: [{
|
|
180
|
+
type: Component,
|
|
181
|
+
args: [{ selector: 'duck-dev-loader-loading-bubble', imports: [], template: "<div class=\"container\">\n <div class=\"main\">\n <span class=\"loader\">Load 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-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-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:70px;bottom:10px;height:28px;width:5.15px;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"] }]
|
|
182
|
+
}] });
|
|
183
|
+
|
|
184
|
+
class LoaderClassic {
|
|
185
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
186
|
+
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-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-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"] });
|
|
187
|
+
}
|
|
188
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderClassic, decorators: [{
|
|
189
|
+
type: Component,
|
|
190
|
+
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-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-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"] }]
|
|
191
|
+
}] });
|
|
192
|
+
|
|
193
|
+
class LoaderThreeDots {
|
|
194
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderThreeDots, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
195
|
+
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-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-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"] });
|
|
196
|
+
}
|
|
197
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderThreeDots, decorators: [{
|
|
198
|
+
type: Component,
|
|
199
|
+
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-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-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"] }]
|
|
200
|
+
}] });
|
|
201
|
+
|
|
174
202
|
class DuckDevTab {
|
|
175
203
|
tabs = input([], { ...(ngDevMode ? { debugName: "tabs" } : {}) });
|
|
176
204
|
tabChange = output();
|
|
@@ -196,33 +224,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
196
224
|
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: [".duck-dev-tab{width:100%;display:flex;flex-direction:column}.tab-header{position:relative;display:flex;border-bottom:2px solid #e0e0e0;background:transparent}.tab-button{flex:1;padding:12px 24px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:#666;transition:color .3s ease;position:relative;z-index:1;outline:none}.tab-button:hover{color:#333}.tab-button.active{color:#1976d2}.tab-indicator{position:absolute;bottom:-2px;left:0;height:2px;background:#1976d2;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"] }]
|
|
197
225
|
}], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
|
|
198
226
|
|
|
199
|
-
class
|
|
200
|
-
|
|
201
|
-
|
|
227
|
+
class ButtonBlock {
|
|
228
|
+
colorViolet = ButtonEnumColor.Violet;
|
|
229
|
+
colorOrange = ButtonEnumColor.Orange;
|
|
230
|
+
colorWhite = ButtonEnumColor.White;
|
|
231
|
+
colorGray = ButtonEnumColor.Gray;
|
|
232
|
+
colorDark = ButtonEnumColor.Dark;
|
|
233
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
234
|
+
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><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/></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><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/></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</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:#1a1a1a;margin-bottom:40px;text-align:center;border-bottom:3px solid #6366f1;padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:#fff;border-radius:12px;padding:30px;box-shadow:0 4px 6px #0000001a}.demo-container .component-section h2{font-size:28px;font-weight:600;color:#2d3748;margin-bottom:15px;border-left:4px solid #6366f1;padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:#4a5568;margin-bottom:25px;padding:15px;background:#f7fafc;border-radius:8px;border-left:3px solid #cbd5e0}.demo-container .component-section h3{font-size:20px;font-weight:600;color:#2d3748;margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:#1a202c;color:#e2e8f0;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:#f7fafc;border-radius:6px;border-left:3px solid #6366f1;font-size:15px;line-height:1.5;color:#2d3748}.demo-container .component-section .inputs-block ul li strong{color:#6366f1;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:#f9fafb;border-radius:8px;border:2px solid #e5e7eb;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:#6366f1;box-shadow:0 4px 12px #6366f126}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:#6b7280;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: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
202
235
|
}
|
|
203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type:
|
|
236
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlock, decorators: [{
|
|
204
237
|
type: Component,
|
|
205
|
-
args: [{ selector: '
|
|
238
|
+
args: [{ selector: 'app-button-block', imports: [
|
|
239
|
+
ButtonBlurLift,
|
|
240
|
+
ButtonGlideOver,
|
|
241
|
+
TranslocoPipe
|
|
242
|
+
], 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><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/></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><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/></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</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:#1a1a1a;margin-bottom:40px;text-align:center;border-bottom:3px solid #6366f1;padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:#fff;border-radius:12px;padding:30px;box-shadow:0 4px 6px #0000001a}.demo-container .component-section h2{font-size:28px;font-weight:600;color:#2d3748;margin-bottom:15px;border-left:4px solid #6366f1;padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:#4a5568;margin-bottom:25px;padding:15px;background:#f7fafc;border-radius:8px;border-left:3px solid #cbd5e0}.demo-container .component-section h3{font-size:20px;font-weight:600;color:#2d3748;margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:#1a202c;color:#e2e8f0;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:#f7fafc;border-radius:6px;border-left:3px solid #6366f1;font-size:15px;line-height:1.5;color:#2d3748}.demo-container .component-section .inputs-block ul li strong{color:#6366f1;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:#f9fafb;border-radius:8px;border:2px solid #e5e7eb;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:#6366f1;box-shadow:0 4px 12px #6366f126}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:#6b7280;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"] }]
|
|
206
243
|
}] });
|
|
207
244
|
|
|
208
|
-
class
|
|
209
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type:
|
|
210
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type:
|
|
245
|
+
class LoaderBlock {
|
|
246
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
247
|
+
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><duck-dev-loader-classic /></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><duck-dev-loader-loading-bubble /></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><lib-loader-three-dots /></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: [".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:#1a1a1a;margin-bottom:40px;text-align:center;border-bottom:3px solid #6366f1;padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:#fff;border-radius:12px;padding:30px;box-shadow:0 4px 6px #0000001a}.demo-container .component-section h2{font-size:28px;font-weight:600;color:#2d3748;margin-bottom:15px;border-left:4px solid #6366f1;padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:#4a5568;margin-bottom:25px;padding:15px;background:#f7fafc;border-radius:8px;border-left:3px solid #cbd5e0}.demo-container .component-section h3{font-size:20px;font-weight:600;color:#2d3748;margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:#1a202c;color:#e2e8f0;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:#f7fafc;border-radius:6px;border-left:3px solid #6366f1;font-size:15px;line-height:1.5;color:#2d3748}.demo-container .component-section .inputs-block ul li strong{color:#6366f1;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:#f9fafb;border-radius:8px;border:2px solid #e5e7eb;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:#6366f1;box-shadow:0 4px 12px #6366f126}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:#6b7280;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" }] });
|
|
211
248
|
}
|
|
212
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type:
|
|
249
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderBlock, decorators: [{
|
|
213
250
|
type: Component,
|
|
214
|
-
args: [{ selector: '
|
|
251
|
+
args: [{ selector: 'app-loader-block', imports: [
|
|
252
|
+
LoaderClassic,
|
|
253
|
+
LoaderLoadingBubble,
|
|
254
|
+
LoaderThreeDots,
|
|
255
|
+
TranslocoPipe
|
|
256
|
+
], 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><duck-dev-loader-classic /></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><duck-dev-loader-loading-bubble /></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><lib-loader-three-dots /></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: [".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:#1a1a1a;margin-bottom:40px;text-align:center;border-bottom:3px solid #6366f1;padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:#fff;border-radius:12px;padding:30px;box-shadow:0 4px 6px #0000001a}.demo-container .component-section h2{font-size:28px;font-weight:600;color:#2d3748;margin-bottom:15px;border-left:4px solid #6366f1;padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:#4a5568;margin-bottom:25px;padding:15px;background:#f7fafc;border-radius:8px;border-left:3px solid #cbd5e0}.demo-container .component-section h3{font-size:20px;font-weight:600;color:#2d3748;margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:#1a202c;color:#e2e8f0;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:#f7fafc;border-radius:6px;border-left:3px solid #6366f1;font-size:15px;line-height:1.5;color:#2d3748}.demo-container .component-section .inputs-block ul li strong{color:#6366f1;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:#f9fafb;border-radius:8px;border:2px solid #e5e7eb;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:#6366f1;box-shadow:0 4px 12px #6366f126}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:#6b7280;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"] }]
|
|
215
257
|
}] });
|
|
216
258
|
|
|
217
|
-
class
|
|
218
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type:
|
|
219
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type:
|
|
259
|
+
class TabsBlock {
|
|
260
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
261
|
+
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: [".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:#1a1a1a;margin-bottom:40px;text-align:center;border-bottom:3px solid #6366f1;padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:#fff;border-radius:12px;padding:30px;box-shadow:0 4px 6px #0000001a}.demo-container .component-section h2{font-size:28px;font-weight:600;color:#2d3748;margin-bottom:15px;border-left:4px solid #6366f1;padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:#4a5568;margin-bottom:25px;padding:15px;background:#f7fafc;border-radius:8px;border-left:3px solid #cbd5e0}.demo-container .component-section h3{font-size:20px;font-weight:600;color:#2d3748;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:#4a5568;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:#f7fafc;border-radius:6px;border-left:3px solid #6366f1;font-size:15px;line-height:1.5;color:#2d3748}.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:#6366f1;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:#edf2f7;border-left:2px solid #a0aec0;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" }] });
|
|
220
262
|
}
|
|
221
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type:
|
|
263
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, decorators: [{
|
|
222
264
|
type: Component,
|
|
223
|
-
args: [{ selector: '
|
|
265
|
+
args: [{ selector: 'app-tabs-block', imports: [
|
|
266
|
+
TranslocoPipe
|
|
267
|
+
], 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: [".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:#1a1a1a;margin-bottom:40px;text-align:center;border-bottom:3px solid #6366f1;padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:#fff;border-radius:12px;padding:30px;box-shadow:0 4px 6px #0000001a}.demo-container .component-section h2{font-size:28px;font-weight:600;color:#2d3748;margin-bottom:15px;border-left:4px solid #6366f1;padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:#4a5568;margin-bottom:25px;padding:15px;background:#f7fafc;border-radius:8px;border-left:3px solid #cbd5e0}.demo-container .component-section h3{font-size:20px;font-weight:600;color:#2d3748;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:#4a5568;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:#f7fafc;border-radius:6px;border-left:3px solid #6366f1;font-size:15px;line-height:1.5;color:#2d3748}.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:#6366f1;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:#edf2f7;border-left:2px solid #a0aec0;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"] }]
|
|
224
268
|
}] });
|
|
225
269
|
|
|
270
|
+
class MainDocumentationPage {
|
|
271
|
+
translocoService = inject(TranslocoService);
|
|
272
|
+
title = signal('demo', { ...(ngDevMode ? { debugName: "title" } : {}) });
|
|
273
|
+
tabs = [
|
|
274
|
+
{ id: 'buttons', label: this.translocoService.translate('tabs.buttons') },
|
|
275
|
+
{ id: 'loaders', label: this.translocoService.translate('tabs.loaders') },
|
|
276
|
+
{ id: 'tabs', label: this.translocoService.translate('tabs.tabs') }
|
|
277
|
+
];
|
|
278
|
+
activeTab = signal(this.tabs[0], { ...(ngDevMode ? { debugName: "activeTab" } : {}) });
|
|
279
|
+
onTabChange(tab) {
|
|
280
|
+
this.activeTab.set(tab);
|
|
281
|
+
}
|
|
282
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
283
|
+
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 [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @if (activeTab().id === 'buttons') {\n <app-button-block />\n }\n @if (activeTab().id === 'loaders') {\n <app-loader-block />\n }\n @if (activeTab().id === 'tabs') {\n <app-tabs-block />\n }\n</duck-dev-tab>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }] });
|
|
284
|
+
}
|
|
285
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, decorators: [{
|
|
286
|
+
type: Component,
|
|
287
|
+
args: [{ selector: 'duck-dev-main-documentation-page', imports: [
|
|
288
|
+
ButtonBlock,
|
|
289
|
+
DuckDevTab,
|
|
290
|
+
LoaderBlock,
|
|
291
|
+
TabsBlock
|
|
292
|
+
], template: "<duck-dev-tab [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @if (activeTab().id === 'buttons') {\n <app-button-block />\n }\n @if (activeTab().id === 'loaders') {\n <app-loader-block />\n }\n @if (activeTab().id === 'tabs') {\n <app-tabs-block />\n }\n</duck-dev-tab>\n" }]
|
|
293
|
+
}] });
|
|
294
|
+
|
|
295
|
+
const DuckDevLibTranslations = {
|
|
296
|
+
en: import('./duck-dev-lib-en-Bp-dlVHg.mjs'),
|
|
297
|
+
ru: import('./duck-dev-lib-ru-BESv0nFL.mjs')
|
|
298
|
+
};
|
|
299
|
+
|
|
226
300
|
/*
|
|
227
301
|
* Public API Surface of duck-dev-lib
|
|
228
302
|
*/
|
|
@@ -231,5 +305,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
231
305
|
* Generated bundle index. Do not edit.
|
|
232
306
|
*/
|
|
233
307
|
|
|
234
|
-
export { ButtonBlurLift, ButtonEnumColor, ButtonGlideOver, DuckDevTab, LoaderClassic, LoaderLoadingBubble, LoaderThreeDots };
|
|
308
|
+
export { ButtonBlurLift, ButtonEnumColor, ButtonGlideOver, DuckDevLibTranslations, DuckDevTab, LoaderClassic, LoaderLoadingBubble, LoaderThreeDots, MainDocumentationPage };
|
|
235
309
|
//# sourceMappingURL=duck-dev-lib.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"duck-dev-lib.mjs","sources":["../../../projects/duck-dev-lib/src/lib/shared/enum/button-enum.ts","../../../projects/duck-dev-lib/src/lib/duck-dev-button/button-blur-lift/button-blur-lift.ts","../../../projects/duck-dev-lib/src/lib/duck-dev-button/button-blur-lift/button-blur-lift.html","../../../projects/duck-dev-lib/src/lib/duck-dev-button/button-glide-over/button-glide-over.ts","../../../projects/duck-dev-lib/src/lib/duck-dev-button/button-glide-over/button-glide-over.html","../../../projects/duck-dev-lib/src/lib/duck-dev-tab/duck-dev-tab.ts","../../../projects/duck-dev-lib/src/lib/duck-dev-tab/duck-dev-tab.html","../../../projects/duck-dev-lib/src/lib/duck-dev-loader/loader-text-bubble/loader-loading-bubble.ts","../../../projects/duck-dev-lib/src/lib/duck-dev-loader/loader-text-bubble/loader-loading-bubble.html","../../../projects/duck-dev-lib/src/lib/duck-dev-loader/loader-classic/loader-classic.ts","../../../projects/duck-dev-lib/src/lib/duck-dev-loader/loader-classic/loader-classic.html","../../../projects/duck-dev-lib/src/lib/duck-dev-loader/loader-three-dots/loader-three-dots.ts","../../../projects/duck-dev-lib/src/lib/duck-dev-loader/loader-three-dots/loader-three-dots.html","../../../projects/duck-dev-lib/src/public-api.ts","../../../projects/duck-dev-lib/src/duck-dev-lib.ts"],"sourcesContent":["export enum ButtonEnumColor {\n Orange = 'orange',\n Dark = 'dark',\n White = 'white',\n Gray = 'gray',\n Violet = 'violet'\n}\n","import {Component, computed, input} from '@angular/core';\nimport {ButtonEnumColor} from '../../shared';\n\n@Component({\n selector: 'duck-dev-button-blur-lift',\n imports: [],\n templateUrl: './button-blur-lift.html',\n styleUrl: './button-blur-lift.scss',\n})\nexport class ButtonBlurLift {\n public readonly textButton = input.required<string>();\n public readonly colorButton = input<ButtonEnumColor>(ButtonEnumColor.White);\n public readonly padding = input<string | null>(null);\n public readonly hoverText = input<string | null>(null);\n\n protected readonly buttonStyle = computed(() => {\n const color = this.colorButton();\n let bgColor, borderColor, hoverColor, activeColor, textColor, focusShadow;\n\n switch (color) {\n case ButtonEnumColor.Violet:\n bgColor = 'var(--dd-base-secondary)';\n hoverColor = 'var(--dd-base-secondary)';\n activeColor = 'var(--dd-base-secondary)';\n textColor = 'var(--dd-gray-0)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-secondary)';\n break;\n\n case ButtonEnumColor.Orange:\n bgColor = 'var(--dd-base-accent-orange)';\n hoverColor = 'var(--dd-base-active-orange)';\n activeColor = 'var(--dd-base-accent-yellow)';\n textColor = 'var(--dd-gray-0)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-active-orange)';\n break;\n\n case ButtonEnumColor.White:\n bgColor = 'var(--dd-base-0)';\n hoverColor = 'var(--dd-base-100)';\n activeColor = 'var(--dd-base-200)';\n textColor = 'var(--dd-base-600)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-300)';\n break;\n\n case ButtonEnumColor.Gray:\n bgColor = 'var(--dd-base-100)';\n hoverColor = 'var(--dd-base-200)';\n activeColor = 'var(--dd-base-200)';\n textColor = 'var(--dd-base-600)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-400)';\n break;\n\n case ButtonEnumColor.Dark:\n bgColor = 'var(--dd-base-600)';\n hoverColor = 'var(--dd-base-400)';\n activeColor = 'var(--dd-base-300)';\n textColor = 'var(--dd-base-0)';\n focusShadow = '0 0 0 3px rgba(18, 19, 21, 0.3)';\n borderColor = 'var(--dd-base-600)';\n break;\n\n default:\n bgColor = 'var(--dd-base-0)';\n hoverColor = 'var(--dd-base-100)';\n activeColor = 'var(--dd-base-200)';\n textColor = 'var(--dd-base-600)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-300)';\n break;\n }\n\n return {\n '--btn-bg-color': bgColor,\n '--btn-border-color': borderColor,\n '--btn-padding': this.padding() || '10px 24px',\n '--btn-hover-color': hoverColor,\n '--btn-active-color': activeColor,\n '--btn-text-color': textColor,\n '--btn-focus-shadow': focusShadow\n };\n });\n\n protected readonly textLetters = computed(() => {\n return this.textButton()\n .split('')\n .map((char) => (char === ' ' ? '\\u00A0' : char));\n });\n\n protected readonly hoverTextLetters = computed(() => {\n const hover = this.hoverText();\n\n return hover ? hover.split('').map((char) => (char === ' ' ? '\\u00A0' : char)) : [];\n });\n}\n","<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","import {Component, computed, input} from '@angular/core';\nimport {ButtonEnumColor} from '../../shared';\n\n@Component({\n selector: 'duck-dev-button-glide-over',\n standalone: true,\n imports: [],\n templateUrl: './button-glide-over.html',\n styleUrl: './button-glide-over.scss',\n})\nexport class ButtonGlideOver {\n public readonly textButton = input.required<string>();\n public readonly colorButton = input<ButtonEnumColor>(ButtonEnumColor.White);\n public readonly padding = input<string | null>(null);\n\n protected readonly buttonStyle = computed(() => {\n const color = this.colorButton();\n let bgColor, borderColor, hoverColor, activeColor, textColor, focusShadow;\n\n switch (color) {\n case ButtonEnumColor.Violet:\n bgColor = 'var(--dd-base-secondary)';\n hoverColor = 'var(--dd-base-secondary)';\n activeColor = 'var(--dd-base-secondary)';\n textColor = 'var(--dd-gray-0)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-secondary)';\n break;\n\n case ButtonEnumColor.Orange:\n bgColor = 'var(--dd-base-accent-orange)';\n hoverColor = 'var(--dd-base-active-orange)';\n activeColor = 'var(--dd-base-accent-yellow)';\n textColor = 'var(--dd-gray-0)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-active-orange)';\n break;\n\n case ButtonEnumColor.White:\n bgColor = 'var(--dd-base-0)';\n hoverColor = 'var(--dd-base-100)';\n activeColor = 'var(--dd-base-200)';\n textColor = 'var(--dd-base-600)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-300)';\n break;\n\n case ButtonEnumColor.Gray:\n bgColor = 'var(--dd-base-100)';\n hoverColor = 'var(--dd-base-200)';\n activeColor = 'var(--dd-base-200)';\n textColor = 'var(--dd-base-600)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-400)';\n break;\n\n case ButtonEnumColor.Dark:\n bgColor = 'var(--dd-base-600)';\n hoverColor = 'var(--dd-base-400)';\n activeColor = 'var(--dd-base-300)';\n textColor = 'var(--dd-base-0)';\n focusShadow = '0 0 0 3px rgba(18, 19, 21, 0.3)';\n borderColor = 'var(--dd-base-600)';\n break;\n\n default:\n bgColor = 'var(--dd-base-0)';\n hoverColor = 'var(--dd-base-100)';\n activeColor = 'var(--dd-base-200)';\n textColor = 'var(--dd-base-600)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-300)';\n break;\n }\n\n return {\n '--btn-bg-color': bgColor,\n '--btn-border-color': borderColor,\n '--btn-padding': this.padding() || '10px 24px',\n '--btn-hover-color': hoverColor,\n '--btn-active-color': activeColor,\n '--btn-text-color': textColor,\n '--btn-focus-shadow': focusShadow\n };\n });\n}\n","<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","import { Component, signal, computed, input, output } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nexport interface DuckDevTabItem {\n id: string;\n label: string;\n content?: any;\n}\n\n@Component({\n selector: 'duck-dev-tab',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './duck-dev-tab.html',\n styleUrl: './duck-dev-tab.scss',\n})\nexport class DuckDevTab {\n public tabs = input<DuckDevTabItem[]>([]);\n public tabChange = output<DuckDevTabItem>();\n\n public readonly activeTabIndex = signal<number>(0);\n public readonly animationDirection = signal<'left' | 'right'>('right');\n\n public activeTab = computed(() => this.tabs()[this.activeTabIndex()]);\n\n protected selectTab(index: number): void {\n if (index === this.activeTabIndex()) {\n return;\n }\n\n this.animationDirection.set(index > this.activeTabIndex() ? 'right' : 'left');\n this.activeTabIndex.set(index);\n this.tabChange.emit(this.tabs()[index]);\n }\n\n protected isActive(index: number): boolean {\n return this.activeTabIndex() === index;\n }\n}\n","<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","import { Component } from '@angular/core';\n\n@Component({\n selector: 'duck-dev-loader-loading-bubble',\n imports: [],\n templateUrl: './loader-loading-bubble.html',\n styleUrl: './loader-loading-bubble.scss',\n})\nexport class LoaderLoadingBubble {\n\n}\n","<div class=\"container\">\n <div class=\"main\">\n <span class=\"loader\">Load ng</span>\n </div>\n</div>\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'duck-dev-loader-classic',\n imports: [],\n templateUrl: './loader-classic.html',\n styleUrl: './loader-classic.scss',\n})\nexport class LoaderClassic {}\n","<span class=\"loader\"></span>\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'duck-dev-loader-three-dots',\n imports: [],\n templateUrl: './loader-three-dots.html',\n styleUrl: './loader-three-dots.scss',\n})\nexport class LoaderThreeDots {}\n","<span class=\"loader\"></span>\n","/*\n * Public API Surface of duck-dev-lib\n */\nexport * from './lib/duck-dev-button';\nexport * from './lib/duck-dev-tab';\nexport * from './lib/duck-dev-loader';\nexport * from './lib/shared';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;IAAY;AAAZ,CAAA,UAAY,eAAe,EAAA;AACzB,IAAA,eAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,eAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,eAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,eAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,eAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACnB,CAAC,EANW,eAAe,KAAf,eAAe,GAAA,EAAA,CAAA,CAAA;;MCSd,cAAc,CAAA;AACT,IAAA,UAAU,GAAG,KAAK,CAAC,QAAQ,uDAAU;AACrC,IAAA,WAAW,GAAG,KAAK,CAAkB,eAAe,CAAC,KAAK,yDAAC;AAC3D,IAAA,OAAO,GAAG,KAAK,CAAgB,IAAI,qDAAC;AACpC,IAAA,SAAS,GAAG,KAAK,CAAgB,IAAI,uDAAC;AAEnC,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;AAC7C,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE;QAChC,IAAI,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW;QAEzE,QAAQ,KAAK;YACX,KAAK,eAAe,CAAC,MAAM;gBACzB,OAAO,GAAG,0BAA0B;gBACpC,UAAU,GAAG,0BAA0B;gBACvC,WAAW,GAAG,0BAA0B;gBACxC,SAAS,GAAG,kBAAkB;gBAC9B,WAAW,GAAG,8BAA8B;gBAC5C,WAAW,GAAG,0BAA0B;gBACxC;YAEF,KAAK,eAAe,CAAC,MAAM;gBACzB,OAAO,GAAG,8BAA8B;gBACxC,UAAU,GAAG,8BAA8B;gBAC3C,WAAW,GAAG,8BAA8B;gBAC5C,SAAS,GAAG,kBAAkB;gBAC9B,WAAW,GAAG,8BAA8B;gBAC5C,WAAW,GAAG,8BAA8B;gBAC5C;YAEF,KAAK,eAAe,CAAC,KAAK;gBACxB,OAAO,GAAG,kBAAkB;gBAC5B,UAAU,GAAG,oBAAoB;gBACjC,WAAW,GAAG,oBAAoB;gBAClC,SAAS,GAAG,oBAAoB;gBAChC,WAAW,GAAG,8BAA8B;gBAC5C,WAAW,GAAG,oBAAoB;gBAClC;YAEF,KAAK,eAAe,CAAC,IAAI;gBACvB,OAAO,GAAG,oBAAoB;gBAC9B,UAAU,GAAG,oBAAoB;gBACjC,WAAW,GAAG,oBAAoB;gBAClC,SAAS,GAAG,oBAAoB;gBAChC,WAAW,GAAG,8BAA8B;gBAC5C,WAAW,GAAG,oBAAoB;gBAClC;YAEF,KAAK,eAAe,CAAC,IAAI;gBACvB,OAAO,GAAG,oBAAoB;gBAC9B,UAAU,GAAG,oBAAoB;gBACjC,WAAW,GAAG,oBAAoB;gBAClC,SAAS,GAAG,kBAAkB;gBAC9B,WAAW,GAAG,iCAAiC;gBAC/C,WAAW,GAAG,oBAAoB;gBAClC;AAEF,YAAA;gBACE,OAAO,GAAG,kBAAkB;gBAC5B,UAAU,GAAG,oBAAoB;gBACjC,WAAW,GAAG,oBAAoB;gBAClC,SAAS,GAAG,oBAAoB;gBAChC,WAAW,GAAG,8BAA8B;gBAC5C,WAAW,GAAG,oBAAoB;gBAClC;;QAGJ,OAAO;AACL,YAAA,gBAAgB,EAAE,OAAO;AACzB,YAAA,oBAAoB,EAAE,WAAW;AACjC,YAAA,eAAe,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,WAAW;AAC9C,YAAA,mBAAmB,EAAE,UAAU;AAC/B,YAAA,oBAAoB,EAAE,WAAW;AACjC,YAAA,kBAAkB,EAAE,SAAS;AAC7B,YAAA,oBAAoB,EAAE;SACvB;AACH,IAAA,CAAC,yDAAC;AAEiB,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;QAC7C,OAAO,IAAI,CAAC,UAAU;aACnB,KAAK,CAAC,EAAE;aACR,GAAG,CAAC,CAAC,IAAI,MAAM,IAAI,KAAK,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC,CAAC;AACpD,IAAA,CAAC,yDAAC;AAEiB,IAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAK;AAClD,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE;AAE9B,QAAA,OAAO,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,MAAM,IAAI,KAAK,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC,CAAC,GAAG,EAAE;AACrF,IAAA,CAAC,8DAAC;uGAvFS,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,mnBCT3B,koFAsEA,EAAA,MAAA,EAAA,CAAA,iqdAAA,CAAA,EAAA,CAAA;;2FD7Da,cAAc,EAAA,UAAA,EAAA,CAAA;kBAN1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,2BAA2B,WAC5B,EAAE,EAAA,QAAA,EAAA,koFAAA,EAAA,MAAA,EAAA,CAAA,iqdAAA,CAAA,EAAA;;;MEKA,eAAe,CAAA;AACV,IAAA,UAAU,GAAG,KAAK,CAAC,QAAQ,uDAAU;AACrC,IAAA,WAAW,GAAG,KAAK,CAAkB,eAAe,CAAC,KAAK,yDAAC;AAC3D,IAAA,OAAO,GAAG,KAAK,CAAgB,IAAI,qDAAC;AAEjC,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;AAC7C,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE;QAChC,IAAI,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW;QAEzE,QAAQ,KAAK;YACX,KAAK,eAAe,CAAC,MAAM;gBACzB,OAAO,GAAG,0BAA0B;gBACpC,UAAU,GAAG,0BAA0B;gBACvC,WAAW,GAAG,0BAA0B;gBACxC,SAAS,GAAG,kBAAkB;gBAC9B,WAAW,GAAG,8BAA8B;gBAC5C,WAAW,GAAG,0BAA0B;gBACxC;YAEF,KAAK,eAAe,CAAC,MAAM;gBACzB,OAAO,GAAG,8BAA8B;gBACxC,UAAU,GAAG,8BAA8B;gBAC3C,WAAW,GAAG,8BAA8B;gBAC5C,SAAS,GAAG,kBAAkB;gBAC9B,WAAW,GAAG,8BAA8B;gBAC5C,WAAW,GAAG,8BAA8B;gBAC5C;YAEF,KAAK,eAAe,CAAC,KAAK;gBACxB,OAAO,GAAG,kBAAkB;gBAC5B,UAAU,GAAG,oBAAoB;gBACjC,WAAW,GAAG,oBAAoB;gBAClC,SAAS,GAAG,oBAAoB;gBAChC,WAAW,GAAG,8BAA8B;gBAC5C,WAAW,GAAG,oBAAoB;gBAClC;YAEF,KAAK,eAAe,CAAC,IAAI;gBACvB,OAAO,GAAG,oBAAoB;gBAC9B,UAAU,GAAG,oBAAoB;gBACjC,WAAW,GAAG,oBAAoB;gBAClC,SAAS,GAAG,oBAAoB;gBAChC,WAAW,GAAG,8BAA8B;gBAC5C,WAAW,GAAG,oBAAoB;gBAClC;YAEF,KAAK,eAAe,CAAC,IAAI;gBACvB,OAAO,GAAG,oBAAoB;gBAC9B,UAAU,GAAG,oBAAoB;gBACjC,WAAW,GAAG,oBAAoB;gBAClC,SAAS,GAAG,kBAAkB;gBAC9B,WAAW,GAAG,iCAAiC;gBAC/C,WAAW,GAAG,oBAAoB;gBAClC;AAEF,YAAA;gBACE,OAAO,GAAG,kBAAkB;gBAC5B,UAAU,GAAG,oBAAoB;gBACjC,WAAW,GAAG,oBAAoB;gBAClC,SAAS,GAAG,oBAAoB;gBAChC,WAAW,GAAG,8BAA8B;gBAC5C,WAAW,GAAG,oBAAoB;gBAClC;;QAGJ,OAAO;AACL,YAAA,gBAAgB,EAAE,OAAO;AACzB,YAAA,oBAAoB,EAAE,WAAW;AACjC,YAAA,eAAe,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,WAAW;AAC9C,YAAA,mBAAmB,EAAE,UAAU;AAC/B,YAAA,oBAAoB,EAAE,WAAW;AACjC,YAAA,kBAAkB,EAAE,SAAS;AAC7B,YAAA,oBAAoB,EAAE;SACvB;AACH,IAAA,CAAC,yDAAC;uGA1ES,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,gfCV5B,6iDA6CA,EAAA,MAAA,EAAA,CAAA,iqdAAA,CAAA,EAAA,CAAA;;2FDnCa,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;+BACE,4BAA4B,EAAA,UAAA,EAC1B,IAAI,EAAA,OAAA,EACP,EAAE,EAAA,QAAA,EAAA,6iDAAA,EAAA,MAAA,EAAA,CAAA,iqdAAA,CAAA,EAAA;;;MEUA,UAAU,CAAA;AACd,IAAA,IAAI,GAAG,KAAK,CAAmB,EAAE,kDAAC;IAClC,SAAS,GAAG,MAAM,EAAkB;AAE3B,IAAA,cAAc,GAAG,MAAM,CAAS,CAAC,4DAAC;AAClC,IAAA,kBAAkB,GAAG,MAAM,CAAmB,OAAO,gEAAC;AAE/D,IAAA,SAAS,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,uDAAC;AAE3D,IAAA,SAAS,CAAC,KAAa,EAAA;AAC/B,QAAA,IAAI,KAAK,KAAK,IAAI,CAAC,cAAc,EAAE,EAAE;YACnC;QACF;QAEA,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,OAAO,GAAG,MAAM,CAAC;AAC7E,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC;AAC9B,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC;IACzC;AAEU,IAAA,QAAQ,CAAC,KAAa,EAAA;AAC9B,QAAA,OAAO,IAAI,CAAC,cAAc,EAAE,KAAK,KAAK;IACxC;uGArBW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAV,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChBvB,s1BA8BA,EAAA,MAAA,EAAA,CAAA,ohCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDlBY,YAAY,EAAA,CAAA,EAAA,CAAA;;2FAIX,UAAU,EAAA,UAAA,EAAA,CAAA;kBAPtB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,UAAA,EACZ,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,s1BAAA,EAAA,MAAA,EAAA,CAAA,ohCAAA,CAAA,EAAA;;;MEJZ,mBAAmB,CAAA;uGAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,0FCRhC,uHAKA,EAAA,MAAA,EAAA,CAAA,g5EAAA,CAAA,EAAA,CAAA;;2FDGa,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAN/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gCAAgC,WACjC,EAAE,EAAA,QAAA,EAAA,uHAAA,EAAA,MAAA,EAAA,CAAA,g5EAAA,CAAA,EAAA;;;MEIA,aAAa,CAAA;uGAAb,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,mFCR1B,kCACA,EAAA,MAAA,EAAA,CAAA,0+CAAA,CAAA,EAAA,CAAA;;2FDOa,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,yBAAyB,WAC1B,EAAE,EAAA,QAAA,EAAA,kCAAA,EAAA,MAAA,EAAA,CAAA,0+CAAA,CAAA,EAAA;;;MEIA,eAAe,CAAA;uGAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,sFCR5B,kCACA,EAAA,MAAA,EAAA,CAAA,ktDAAA,CAAA,EAAA,CAAA;;2FDOa,eAAe,EAAA,UAAA,EAAA,CAAA;kBAN3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,4BAA4B,WAC7B,EAAE,EAAA,QAAA,EAAA,kCAAA,EAAA,MAAA,EAAA,CAAA,ktDAAA,CAAA,EAAA;;;AEJb;;AAEG;;ACFH;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"duck-dev-lib.mjs","sources":["../../../projects/duck-dev-lib/src/lib/shared/enum/button-enum.ts","../../../projects/duck-dev-lib/src/lib/duck-dev-button/button-blur-lift/button-blur-lift.ts","../../../projects/duck-dev-lib/src/lib/duck-dev-button/button-blur-lift/button-blur-lift.html","../../../projects/duck-dev-lib/src/lib/duck-dev-button/button-glide-over/button-glide-over.ts","../../../projects/duck-dev-lib/src/lib/duck-dev-button/button-glide-over/button-glide-over.html","../../../projects/duck-dev-lib/src/lib/duck-dev-loader/loader-text-bubble/loader-loading-bubble.ts","../../../projects/duck-dev-lib/src/lib/duck-dev-loader/loader-text-bubble/loader-loading-bubble.html","../../../projects/duck-dev-lib/src/lib/duck-dev-loader/loader-classic/loader-classic.ts","../../../projects/duck-dev-lib/src/lib/duck-dev-loader/loader-classic/loader-classic.html","../../../projects/duck-dev-lib/src/lib/duck-dev-loader/loader-three-dots/loader-three-dots.ts","../../../projects/duck-dev-lib/src/lib/duck-dev-loader/loader-three-dots/loader-three-dots.html","../../../projects/duck-dev-lib/src/lib/duck-dev-tab/duck-dev-tab.ts","../../../projects/duck-dev-lib/src/lib/duck-dev-tab/duck-dev-tab.html","../../../projects/duck-dev-lib/src/lib/main-documentation-page/button-block/button-block.ts","../../../projects/duck-dev-lib/src/lib/main-documentation-page/button-block/button-block.html","../../../projects/duck-dev-lib/src/lib/main-documentation-page/loader-block/loader-block.ts","../../../projects/duck-dev-lib/src/lib/main-documentation-page/loader-block/loader-block.html","../../../projects/duck-dev-lib/src/lib/main-documentation-page/tabs-block/tabs-block.ts","../../../projects/duck-dev-lib/src/lib/main-documentation-page/tabs-block/tabs-block.html","../../../projects/duck-dev-lib/src/lib/main-documentation-page/main-documentation-page.ts","../../../projects/duck-dev-lib/src/lib/main-documentation-page/main-documentation-page.html","../../../projects/duck-dev-lib/src/lib/translation.ts","../../../projects/duck-dev-lib/src/public-api.ts","../../../projects/duck-dev-lib/src/duck-dev-lib.ts"],"sourcesContent":["export enum ButtonEnumColor {\n Orange = 'orange',\n Dark = 'dark',\n White = 'white',\n Gray = 'gray',\n Violet = 'violet'\n}\n","import {Component, computed, input} from '@angular/core';\nimport {ButtonEnumColor} from '../../shared';\n\n@Component({\n selector: 'duck-dev-button-blur-lift',\n imports: [],\n templateUrl: './button-blur-lift.html',\n styleUrl: './button-blur-lift.scss',\n})\nexport class ButtonBlurLift {\n public readonly textButton = input.required<string>();\n public readonly colorButton = input<ButtonEnumColor>(ButtonEnumColor.White);\n public readonly padding = input<string | null>(null);\n public readonly hoverText = input<string | null>(null);\n\n protected readonly buttonStyle = computed(() => {\n const color = this.colorButton();\n let bgColor, borderColor, hoverColor, activeColor, textColor, focusShadow;\n\n switch (color) {\n case ButtonEnumColor.Violet:\n bgColor = 'var(--dd-base-secondary)';\n hoverColor = 'var(--dd-base-secondary)';\n activeColor = 'var(--dd-base-secondary)';\n textColor = 'var(--dd-gray-0)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-secondary)';\n break;\n\n case ButtonEnumColor.Orange:\n bgColor = 'var(--dd-base-accent-orange)';\n hoverColor = 'var(--dd-base-active-orange)';\n activeColor = 'var(--dd-base-accent-yellow)';\n textColor = 'var(--dd-gray-0)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-active-orange)';\n break;\n\n case ButtonEnumColor.White:\n bgColor = 'var(--dd-base-0)';\n hoverColor = 'var(--dd-base-100)';\n activeColor = 'var(--dd-base-200)';\n textColor = 'var(--dd-base-600)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-300)';\n break;\n\n case ButtonEnumColor.Gray:\n bgColor = 'var(--dd-base-100)';\n hoverColor = 'var(--dd-base-200)';\n activeColor = 'var(--dd-base-200)';\n textColor = 'var(--dd-base-600)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-400)';\n break;\n\n case ButtonEnumColor.Dark:\n bgColor = 'var(--dd-base-600)';\n hoverColor = 'var(--dd-base-400)';\n activeColor = 'var(--dd-base-300)';\n textColor = 'var(--dd-base-0)';\n focusShadow = '0 0 0 3px rgba(18, 19, 21, 0.3)';\n borderColor = 'var(--dd-base-600)';\n break;\n\n default:\n bgColor = 'var(--dd-base-0)';\n hoverColor = 'var(--dd-base-100)';\n activeColor = 'var(--dd-base-200)';\n textColor = 'var(--dd-base-600)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-300)';\n break;\n }\n\n return {\n '--btn-bg-color': bgColor,\n '--btn-border-color': borderColor,\n '--btn-padding': this.padding() || '10px 24px',\n '--btn-hover-color': hoverColor,\n '--btn-active-color': activeColor,\n '--btn-text-color': textColor,\n '--btn-focus-shadow': focusShadow\n };\n });\n\n protected readonly textLetters = computed(() => {\n return this.textButton()\n .split('')\n .map((char) => (char === ' ' ? '\\u00A0' : char));\n });\n\n protected readonly hoverTextLetters = computed(() => {\n const hover = this.hoverText();\n\n return hover ? hover.split('').map((char) => (char === ' ' ? '\\u00A0' : char)) : [];\n });\n}\n","<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","import {Component, computed, input} from '@angular/core';\nimport {ButtonEnumColor} from '../../shared';\n\n@Component({\n selector: 'duck-dev-button-glide-over',\n standalone: true,\n imports: [],\n templateUrl: './button-glide-over.html',\n styleUrl: './button-glide-over.scss',\n})\nexport class ButtonGlideOver {\n public readonly textButton = input.required<string>();\n public readonly colorButton = input<ButtonEnumColor>(ButtonEnumColor.White);\n public readonly padding = input<string | null>(null);\n\n protected readonly buttonStyle = computed(() => {\n const color = this.colorButton();\n let bgColor, borderColor, hoverColor, activeColor, textColor, focusShadow;\n\n switch (color) {\n case ButtonEnumColor.Violet:\n bgColor = 'var(--dd-base-secondary)';\n hoverColor = 'var(--dd-base-secondary)';\n activeColor = 'var(--dd-base-secondary)';\n textColor = 'var(--dd-gray-0)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-secondary)';\n break;\n\n case ButtonEnumColor.Orange:\n bgColor = 'var(--dd-base-accent-orange)';\n hoverColor = 'var(--dd-base-active-orange)';\n activeColor = 'var(--dd-base-accent-yellow)';\n textColor = 'var(--dd-gray-0)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-active-orange)';\n break;\n\n case ButtonEnumColor.White:\n bgColor = 'var(--dd-base-0)';\n hoverColor = 'var(--dd-base-100)';\n activeColor = 'var(--dd-base-200)';\n textColor = 'var(--dd-base-600)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-300)';\n break;\n\n case ButtonEnumColor.Gray:\n bgColor = 'var(--dd-base-100)';\n hoverColor = 'var(--dd-base-200)';\n activeColor = 'var(--dd-base-200)';\n textColor = 'var(--dd-base-600)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-400)';\n break;\n\n case ButtonEnumColor.Dark:\n bgColor = 'var(--dd-base-600)';\n hoverColor = 'var(--dd-base-400)';\n activeColor = 'var(--dd-base-300)';\n textColor = 'var(--dd-base-0)';\n focusShadow = '0 0 0 3px rgba(18, 19, 21, 0.3)';\n borderColor = 'var(--dd-base-600)';\n break;\n\n default:\n bgColor = 'var(--dd-base-0)';\n hoverColor = 'var(--dd-base-100)';\n activeColor = 'var(--dd-base-200)';\n textColor = 'var(--dd-base-600)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-300)';\n break;\n }\n\n return {\n '--btn-bg-color': bgColor,\n '--btn-border-color': borderColor,\n '--btn-padding': this.padding() || '10px 24px',\n '--btn-hover-color': hoverColor,\n '--btn-active-color': activeColor,\n '--btn-text-color': textColor,\n '--btn-focus-shadow': focusShadow\n };\n });\n}\n","<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","import { Component } from '@angular/core';\n\n@Component({\n selector: 'duck-dev-loader-loading-bubble',\n imports: [],\n templateUrl: './loader-loading-bubble.html',\n styleUrl: './loader-loading-bubble.scss',\n})\nexport class LoaderLoadingBubble {\n\n}\n","<div class=\"container\">\n <div class=\"main\">\n <span class=\"loader\">Load ng</span>\n </div>\n</div>\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'duck-dev-loader-classic',\n imports: [],\n templateUrl: './loader-classic.html',\n styleUrl: './loader-classic.scss',\n})\nexport class LoaderClassic {}\n","<span class=\"loader\"></span>\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'duck-dev-loader-three-dots',\n imports: [],\n templateUrl: './loader-three-dots.html',\n styleUrl: './loader-three-dots.scss',\n})\nexport class LoaderThreeDots {}\n","<span class=\"loader\"></span>\n","import { Component, signal, computed, input, output } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nexport interface DuckDevTabItem {\n id: string;\n label: string;\n content?: any;\n}\n\n@Component({\n selector: 'duck-dev-tab',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './duck-dev-tab.html',\n styleUrl: './duck-dev-tab.scss',\n})\nexport class DuckDevTab {\n public tabs = input<DuckDevTabItem[]>([]);\n public tabChange = output<DuckDevTabItem>();\n\n public readonly activeTabIndex = signal<number>(0);\n public readonly animationDirection = signal<'left' | 'right'>('right');\n\n public activeTab = computed(() => this.tabs()[this.activeTabIndex()]);\n\n protected selectTab(index: number): void {\n if (index === this.activeTabIndex()) {\n return;\n }\n\n this.animationDirection.set(index > this.activeTabIndex() ? 'right' : 'left');\n this.activeTabIndex.set(index);\n this.tabChange.emit(this.tabs()[index]);\n }\n\n protected isActive(index: number): boolean {\n return this.activeTabIndex() === index;\n }\n}\n","<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","import { Component } from '@angular/core';\nimport {ButtonBlurLift, ButtonGlideOver} from \"../../duck-dev-button\";\nimport { ButtonEnumColor } from '../../shared';\nimport {TranslocoPipe} from '@jsverse/transloco';\n\n@Component({\n selector: 'app-button-block',\n imports: [\n ButtonBlurLift,\n ButtonGlideOver,\n TranslocoPipe\n ],\n templateUrl: './button-block.html',\n styleUrl: './button-block.scss',\n})\nexport class ButtonBlock {\n protected readonly colorViolet = ButtonEnumColor.Violet;\n protected readonly colorOrange = ButtonEnumColor.Orange;\n protected readonly colorWhite = ButtonEnumColor.White;\n protected readonly colorGray = ButtonEnumColor.Gray;\n protected readonly colorDark = ButtonEnumColor.Dark;\n}\n","<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><duck-dev-button-glide-over\n textButton=\"Текст кнопки\"\n [colorButton]=\"buttonColor\"\n [padding]=\"'10px 24px'\"\n/></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=\"Нажми меня\" />\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><duck-dev-button-blur-lift\n textButton=\"Основной текст\"\n [hoverText]=\"'Текст при наведении'\"\n [colorButton]=\"buttonColor\"\n [padding]=\"'10px 24px'\"\n/></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=\"Наведи на меня\" [hoverText]=\"'Привет!'\" />\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</div>\n","import { Component } from '@angular/core';\nimport { LoaderClassic, LoaderLoadingBubble, LoaderThreeDots } from \"../../index\";\nimport {TranslocoPipe} from '@jsverse/transloco';\n\n@Component({\n selector: 'app-loader-block',\n imports: [\n LoaderClassic,\n LoaderLoadingBubble,\n LoaderThreeDots,\n TranslocoPipe\n ],\n templateUrl: './loader-block.html',\n styleUrl: './loader-block.scss',\n})\nexport class LoaderBlock {\n}\n","<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><duck-dev-loader-classic /></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><duck-dev-loader-loading-bubble /></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><lib-loader-three-dots /></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","import { Component } from '@angular/core';\nimport {TranslocoPipe} from '@jsverse/transloco';\n\n@Component({\n selector: 'app-tabs-block',\n imports: [\n TranslocoPipe\n ],\n templateUrl: './tabs-block.html',\n styleUrl: './tabs-block.scss',\n})\nexport class TabsBlock {\n}\n","<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","import {Component, signal, inject} from '@angular/core';\nimport {ButtonBlock} from './button-block';\nimport {DuckDevTab, DuckDevTabItem} from '../index';\nimport {LoaderBlock} from './loader-block';\nimport {TabsBlock} from './tabs-block';\nimport {TranslocoService} from '@jsverse/transloco';\n\n@Component({\n selector: 'duck-dev-main-documentation-page',\n imports: [\n ButtonBlock,\n DuckDevTab,\n LoaderBlock,\n TabsBlock\n ],\n templateUrl: './main-documentation-page.html',\n styleUrl: './main-documentation-page.scss',\n})\nexport class MainDocumentationPage {\n private translocoService = inject(TranslocoService);\n\n protected readonly title = signal('demo');\n\n protected readonly tabs: DuckDevTabItem[] = [\n { id: 'buttons', label: this.translocoService.translate('tabs.buttons') },\n { id: 'loaders', label: this.translocoService.translate('tabs.loaders') },\n { id: 'tabs', label: this.translocoService.translate('tabs.tabs') }\n ];\n\n protected readonly activeTab = signal<DuckDevTabItem>(this.tabs[0]);\n\n protected onTabChange(tab: DuckDevTabItem): void {\n this.activeTab.set(tab);\n }\n}\n","<duck-dev-tab [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @if (activeTab().id === 'buttons') {\n <app-button-block />\n }\n @if (activeTab().id === 'loaders') {\n <app-loader-block />\n }\n @if (activeTab().id === 'tabs') {\n <app-tabs-block />\n }\n</duck-dev-tab>\n","import { Translation } from '@jsverse/transloco';\n\nexport const DuckDevLibTranslations: Record<string, Promise<Translation>> = {\n en: import('../i18n/en.json'),\n ru: import('../i18n/ru.json')\n} as const;\n","/*\n * Public API Surface of duck-dev-lib\n */\nexport * from './lib'\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/types/duck-dev-lib.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { Translation } from '@jsverse/transloco';
|
|
2
3
|
|
|
3
4
|
declare enum ButtonEnumColor {
|
|
4
5
|
Orange = "orange",
|
|
@@ -45,6 +46,21 @@ declare class ButtonGlideOver {
|
|
|
45
46
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonGlideOver, "duck-dev-button-glide-over", never, { "textButton": { "alias": "textButton"; "required": true; "isSignal": true; }; "colorButton": { "alias": "colorButton"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
46
47
|
}
|
|
47
48
|
|
|
49
|
+
declare class LoaderLoadingBubble {
|
|
50
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoaderLoadingBubble, never>;
|
|
51
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoaderLoadingBubble, "duck-dev-loader-loading-bubble", never, {}, {}, never, never, true, never>;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
declare class LoaderClassic {
|
|
55
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoaderClassic, never>;
|
|
56
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoaderClassic, "duck-dev-loader-classic", never, {}, {}, never, never, true, never>;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
declare class LoaderThreeDots {
|
|
60
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoaderThreeDots, never>;
|
|
61
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoaderThreeDots, "duck-dev-loader-three-dots", never, {}, {}, never, never, true, never>;
|
|
62
|
+
}
|
|
63
|
+
|
|
48
64
|
interface DuckDevTabItem {
|
|
49
65
|
id: string;
|
|
50
66
|
label: string;
|
|
@@ -62,20 +78,17 @@ declare class DuckDevTab {
|
|
|
62
78
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DuckDevTab, "duck-dev-tab", never, { "tabs": { "alias": "tabs"; "required": false; "isSignal": true; }; }, { "tabChange": "tabChange"; }, never, ["*"], true, never>;
|
|
63
79
|
}
|
|
64
80
|
|
|
65
|
-
declare class
|
|
66
|
-
|
|
67
|
-
|
|
81
|
+
declare class MainDocumentationPage {
|
|
82
|
+
private translocoService;
|
|
83
|
+
protected readonly title: _angular_core.WritableSignal<string>;
|
|
84
|
+
protected readonly tabs: DuckDevTabItem[];
|
|
85
|
+
protected readonly activeTab: _angular_core.WritableSignal<DuckDevTabItem>;
|
|
86
|
+
protected onTabChange(tab: DuckDevTabItem): void;
|
|
87
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MainDocumentationPage, never>;
|
|
88
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MainDocumentationPage, "duck-dev-main-documentation-page", never, {}, {}, never, never, true, never>;
|
|
68
89
|
}
|
|
69
90
|
|
|
70
|
-
declare
|
|
71
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoaderClassic, never>;
|
|
72
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoaderClassic, "duck-dev-loader-classic", never, {}, {}, never, never, true, never>;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
declare class LoaderThreeDots {
|
|
76
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoaderThreeDots, never>;
|
|
77
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoaderThreeDots, "duck-dev-loader-three-dots", never, {}, {}, never, never, true, never>;
|
|
78
|
-
}
|
|
91
|
+
declare const DuckDevLibTranslations: Record<string, Promise<Translation>>;
|
|
79
92
|
|
|
80
|
-
export { ButtonBlurLift, ButtonEnumColor, ButtonGlideOver, DuckDevTab, LoaderClassic, LoaderLoadingBubble, LoaderThreeDots };
|
|
93
|
+
export { ButtonBlurLift, ButtonEnumColor, ButtonGlideOver, DuckDevLibTranslations, DuckDevTab, LoaderClassic, LoaderLoadingBubble, LoaderThreeDots, MainDocumentationPage };
|
|
81
94
|
export type { DuckDevTabItem };
|