duck-dev-lib 0.0.12 → 0.0.14
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 → duck-dev-lib-en-StaNZWYU.mjs} +20 -4
- package/fesm2022/{duck-dev-lib-en-Bp-dlVHg.mjs.map → duck-dev-lib-en-StaNZWYU.mjs.map} +1 -1
- package/fesm2022/{duck-dev-lib-ru-BESv0nFL.mjs → duck-dev-lib-ru-CSq0J4ub.mjs} +20 -4
- package/fesm2022/{duck-dev-lib-ru-BESv0nFL.mjs.map → duck-dev-lib-ru-CSq0J4ub.mjs.map} +1 -1
- package/fesm2022/duck-dev-lib.mjs +18 -10
- package/fesm2022/duck-dev-lib.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
var tabs = {
|
|
2
2
|
buttons: "Buttons",
|
|
3
3
|
loaders: "Loaders",
|
|
4
|
-
tabs: "Tabs"
|
|
4
|
+
tabs: "Tabs",
|
|
5
|
+
svg: "SVG icon"
|
|
5
6
|
};
|
|
6
7
|
var buttons = {
|
|
7
8
|
title: "Duck Dev UI Library - Button Components",
|
|
@@ -110,12 +111,27 @@ var tabsComponent = {
|
|
|
110
111
|
implementation5: "Place tab content inside the component using conditional blocks"
|
|
111
112
|
}
|
|
112
113
|
};
|
|
114
|
+
var svgComponent = {
|
|
115
|
+
title: "Duck Dev UI Library - SVG Icons",
|
|
116
|
+
description: "SVG Icon Component",
|
|
117
|
+
descriptionText: "A collection of SVG icons for your application.",
|
|
118
|
+
usage: "Usage:",
|
|
119
|
+
usageText1: "Import the icon component from the library.",
|
|
120
|
+
usageText2: "Use the icon tag in your template.",
|
|
121
|
+
usageText3: "Customize the icon with CSS styles.",
|
|
122
|
+
availableIcons: "Available Icons:",
|
|
123
|
+
howToAdd: "How to Add New Icon:",
|
|
124
|
+
step1: "Add the SVG icon to the icons folder.",
|
|
125
|
+
step2: "Register the icon in the icons configuration file.",
|
|
126
|
+
step3: "Use the icon tag with the registered ID in your template."
|
|
127
|
+
};
|
|
113
128
|
var en = {
|
|
114
129
|
tabs: tabs,
|
|
115
130
|
buttons: buttons,
|
|
116
131
|
loaders: loaders,
|
|
117
|
-
tabsComponent: tabsComponent
|
|
132
|
+
tabsComponent: tabsComponent,
|
|
133
|
+
svgComponent: svgComponent
|
|
118
134
|
};
|
|
119
135
|
|
|
120
|
-
export { buttons, en as default, loaders, tabs, tabsComponent };
|
|
121
|
-
//# sourceMappingURL=duck-dev-lib-en-
|
|
136
|
+
export { buttons, en as default, loaders, svgComponent, tabs, tabsComponent };
|
|
137
|
+
//# sourceMappingURL=duck-dev-lib-en-StaNZWYU.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"duck-dev-lib-en-
|
|
1
|
+
{"version":3,"file":"duck-dev-lib-en-StaNZWYU.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
var tabs = {
|
|
2
2
|
buttons: "Кнопки",
|
|
3
3
|
loaders: "Загрузчики",
|
|
4
|
-
tabs: "Вкладки"
|
|
4
|
+
tabs: "Вкладки",
|
|
5
|
+
svg: "SVG icon"
|
|
5
6
|
};
|
|
6
7
|
var buttons = {
|
|
7
8
|
title: "Duck Dev UI Library - Компоненты кнопок",
|
|
@@ -110,12 +111,27 @@ var tabsComponent = {
|
|
|
110
111
|
implementation5: "Разместите контент вкладок внутри компонента используя условные блоки"
|
|
111
112
|
}
|
|
112
113
|
};
|
|
114
|
+
var svgComponent = {
|
|
115
|
+
title: "Duck Dev UI Library - SVG Иконки",
|
|
116
|
+
description: "Компонент SVG Иконок",
|
|
117
|
+
descriptionText: "Коллекция SVG иконок для вашего приложения.",
|
|
118
|
+
usage: "Использование:",
|
|
119
|
+
usageText1: "Импортируйте компонент иконки из библиотеки.",
|
|
120
|
+
usageText2: "Используйте тег иконки в вашем шаблоне.",
|
|
121
|
+
usageText3: "Настройте иконку с помощью CSS стилей.",
|
|
122
|
+
availableIcons: "Доступные иконки:",
|
|
123
|
+
howToAdd: "Как добавить новую иконку:",
|
|
124
|
+
step1: "Добавьте SVG иконку в папку icons.",
|
|
125
|
+
step2: "Зарегистрируйте иконку в конфигурационном файле icons.",
|
|
126
|
+
step3: "Используйте тег иконки с зарегистрированным ID в вашем шаблоне."
|
|
127
|
+
};
|
|
113
128
|
var ru = {
|
|
114
129
|
tabs: tabs,
|
|
115
130
|
buttons: buttons,
|
|
116
131
|
loaders: loaders,
|
|
117
|
-
tabsComponent: tabsComponent
|
|
132
|
+
tabsComponent: tabsComponent,
|
|
133
|
+
svgComponent: svgComponent
|
|
118
134
|
};
|
|
119
135
|
|
|
120
|
-
export { buttons, ru as default, loaders, tabs, tabsComponent };
|
|
121
|
-
//# sourceMappingURL=duck-dev-lib-ru-
|
|
136
|
+
export { buttons, ru as default, loaders, svgComponent, tabs, tabsComponent };
|
|
137
|
+
//# sourceMappingURL=duck-dev-lib-ru-CSq0J4ub.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"duck-dev-lib-ru-
|
|
1
|
+
{"version":3,"file":"duck-dev-lib-ru-CSq0J4ub.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { input, computed, Component, output, signal, viewChildren, effect, inject } from '@angular/core';
|
|
3
3
|
import { CommonModule } from '@angular/common';
|
|
4
4
|
import { TranslocoPipe, TranslocoService } from '@jsverse/transloco';
|
|
5
|
+
import * as i1 from '@angular/platform-browser';
|
|
5
6
|
|
|
6
7
|
var ButtonEnumColor;
|
|
7
8
|
(function (ButtonEnumColor) {
|
|
@@ -264,11 +265,11 @@ class DuckDevTabVertical {
|
|
|
264
265
|
return this.activeTabIndex() === index;
|
|
265
266
|
}
|
|
266
267
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabVertical, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
267
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTabVertical, isStandalone: true, selector: "duck-dev-tab-vertical", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"duck-dev-tab-vertical\">\n <div class=\"tab-sidebar\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n #tabButton\n class=\"tab-button\"\n [class.active]=\"isActive(i)\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n @if (tab.icon) {\n <span class=\"tab-icon\" [innerHTML]=\"tab.icon\"></span>\n }\n <span class=\"tab-label\">{{ tab.label }}</span>\n </button>\n }\n <div\n class=\"tab-indicator\"\n [style.top.px]=\"indicatorTop()\"\n [style.height.px]=\"indicatorHeight()\"\n ></div>\n </div>\n\n <div class=\"tab-content-wrapper\">\n <div\n class=\"tab-content\"\n [class.slide-up]=\"animationDirection() === 'up'\"\n [class.slide-down]=\"animationDirection() === 'down'\"\n [attr.data-active-index]=\"activeTabIndex()\"\n [attr.data-animation-key]=\"animationKey()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-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)}.duck-dev-tab-vertical{width:100%;height:100%;display:flex;flex-direction:row}.tab-sidebar{position:relative;display:flex;flex-direction:column;min-width:200px;border-right:2px solid var(--dd-base-300);background:transparent;flex-shrink:0}.tab-button{display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:all .3s ease;position:relative;z-index:1;outline:none;text-align:left;width:100%}.tab-button:hover{color:var(--dd-base-500);background:var(--dd-base-100)}.tab-button.active{color:var(--dd-base-accent-blue);background:var(--dd-base-100)}.tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:transform .3s ease}.tab-button:hover .tab-icon{transform:scale(1.1)}.tab-button.active .tab-icon{transform:scale(1.15)}.tab-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.tab-label{flex:1}.tab-indicator{position:absolute;right:-2px;width:2px;background:var(--dd-base-accent-blue);transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;flex:1;overflow:
|
|
268
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTabVertical, isStandalone: true, selector: "duck-dev-tab-vertical", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"duck-dev-tab-vertical\">\n <div class=\"tab-sidebar\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n #tabButton\n class=\"tab-button\"\n [class.active]=\"isActive(i)\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n @if (tab.icon) {\n <span class=\"tab-icon\" [innerHTML]=\"tab.icon\"></span>\n }\n <span class=\"tab-label\">{{ tab.label }}</span>\n </button>\n }\n <div\n class=\"tab-indicator\"\n [style.top.px]=\"indicatorTop()\"\n [style.height.px]=\"indicatorHeight()\"\n ></div>\n </div>\n\n <div class=\"tab-content-wrapper\">\n <div\n class=\"tab-content\"\n [class.slide-up]=\"animationDirection() === 'up'\"\n [class.slide-down]=\"animationDirection() === 'down'\"\n [attr.data-active-index]=\"activeTabIndex()\"\n [attr.data-animation-key]=\"animationKey()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-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)}.duck-dev-tab-vertical{width:100%;height:100%;display:flex;flex-direction:row;overflow:hidden}.tab-sidebar{position:relative;display:flex;flex-direction:column;min-width:200px;height:100%;border-right:2px solid var(--dd-base-300);background:transparent;flex-shrink:0}.tab-button{display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:all .3s ease;position:relative;z-index:1;outline:none;text-align:left;width:100%}.tab-button:hover{color:var(--dd-base-500);background:var(--dd-base-100)}.tab-button.active{color:var(--dd-base-accent-blue);background:var(--dd-base-100)}.tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:transform .3s ease}.tab-button:hover .tab-icon{transform:scale(1.1)}.tab-button.active .tab-icon{transform:scale(1.15)}.tab-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.tab-label{flex:1}.tab-indicator{position:absolute;right:-2px;width:2px;background:var(--dd-base-accent-blue);transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;flex:1;overflow:auto;padding:20px;min-width:0}.tab-content{width:100%;height:100%}.tab-content.slide-down,.tab-content.slide-up{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-down{animation-name:slideInDown}.tab-content.slide-up{animation-name:slideInUp}@keyframes slideInDown{0%{transform:translateY(100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}@keyframes slideInUp{0%{transform:translateY(-100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
268
269
|
}
|
|
269
270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabVertical, decorators: [{
|
|
270
271
|
type: Component,
|
|
271
|
-
args: [{ selector: 'duck-dev-tab-vertical', standalone: true, imports: [CommonModule], template: "<div class=\"duck-dev-tab-vertical\">\n <div class=\"tab-sidebar\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n #tabButton\n class=\"tab-button\"\n [class.active]=\"isActive(i)\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n @if (tab.icon) {\n <span class=\"tab-icon\" [innerHTML]=\"tab.icon\"></span>\n }\n <span class=\"tab-label\">{{ tab.label }}</span>\n </button>\n }\n <div\n class=\"tab-indicator\"\n [style.top.px]=\"indicatorTop()\"\n [style.height.px]=\"indicatorHeight()\"\n ></div>\n </div>\n\n <div class=\"tab-content-wrapper\">\n <div\n class=\"tab-content\"\n [class.slide-up]=\"animationDirection() === 'up'\"\n [class.slide-down]=\"animationDirection() === 'down'\"\n [attr.data-active-index]=\"activeTabIndex()\"\n [attr.data-animation-key]=\"animationKey()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-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)}.duck-dev-tab-vertical{width:100%;height:100%;display:flex;flex-direction:row}.tab-sidebar{position:relative;display:flex;flex-direction:column;min-width:200px;border-right:2px solid var(--dd-base-300);background:transparent;flex-shrink:0}.tab-button{display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:all .3s ease;position:relative;z-index:1;outline:none;text-align:left;width:100%}.tab-button:hover{color:var(--dd-base-500);background:var(--dd-base-100)}.tab-button.active{color:var(--dd-base-accent-blue);background:var(--dd-base-100)}.tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:transform .3s ease}.tab-button:hover .tab-icon{transform:scale(1.1)}.tab-button.active .tab-icon{transform:scale(1.15)}.tab-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.tab-label{flex:1}.tab-indicator{position:absolute;right:-2px;width:2px;background:var(--dd-base-accent-blue);transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;flex:1;overflow:
|
|
272
|
+
args: [{ selector: 'duck-dev-tab-vertical', standalone: true, imports: [CommonModule], template: "<div class=\"duck-dev-tab-vertical\">\n <div class=\"tab-sidebar\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n #tabButton\n class=\"tab-button\"\n [class.active]=\"isActive(i)\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n @if (tab.icon) {\n <span class=\"tab-icon\" [innerHTML]=\"tab.icon\"></span>\n }\n <span class=\"tab-label\">{{ tab.label }}</span>\n </button>\n }\n <div\n class=\"tab-indicator\"\n [style.top.px]=\"indicatorTop()\"\n [style.height.px]=\"indicatorHeight()\"\n ></div>\n </div>\n\n <div class=\"tab-content-wrapper\">\n <div\n class=\"tab-content\"\n [class.slide-up]=\"animationDirection() === 'up'\"\n [class.slide-down]=\"animationDirection() === 'down'\"\n [attr.data-active-index]=\"activeTabIndex()\"\n [attr.data-animation-key]=\"animationKey()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-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)}.duck-dev-tab-vertical{width:100%;height:100%;display:flex;flex-direction:row;overflow:hidden}.tab-sidebar{position:relative;display:flex;flex-direction:column;min-width:200px;height:100%;border-right:2px solid var(--dd-base-300);background:transparent;flex-shrink:0}.tab-button{display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:all .3s ease;position:relative;z-index:1;outline:none;text-align:left;width:100%}.tab-button:hover{color:var(--dd-base-500);background:var(--dd-base-100)}.tab-button.active{color:var(--dd-base-accent-blue);background:var(--dd-base-100)}.tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:transform .3s ease}.tab-button:hover .tab-icon{transform:scale(1.1)}.tab-button.active .tab-icon{transform:scale(1.15)}.tab-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.tab-label{flex:1}.tab-indicator{position:absolute;right:-2px;width:2px;background:var(--dd-base-accent-blue);transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;flex:1;overflow:auto;padding:20px;min-width:0}.tab-content{width:100%;height:100%}.tab-content.slide-down,.tab-content.slide-up{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-down{animation-name:slideInDown}.tab-content.slide-up{animation-name:slideInUp}@keyframes slideInDown{0%{transform:translateY(100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}@keyframes slideInUp{0%{transform:translateY(-100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}\n"] }]
|
|
272
273
|
}], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }] } });
|
|
273
274
|
|
|
274
275
|
class ButtonBlock {
|
|
@@ -2173,14 +2174,21 @@ const svgIcons = [
|
|
|
2173
2174
|
];
|
|
2174
2175
|
|
|
2175
2176
|
class SvgBlock {
|
|
2177
|
+
sanitizer;
|
|
2176
2178
|
icons = svgIcons;
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
+
constructor(sanitizer) {
|
|
2180
|
+
this.sanitizer = sanitizer;
|
|
2181
|
+
}
|
|
2182
|
+
getSafeHtml(svg) {
|
|
2183
|
+
return this.sanitizer.bypassSecurityTrustHtml(svg);
|
|
2184
|
+
}
|
|
2185
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SvgBlock, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
2186
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: SvgBlock, isStandalone: true, selector: "app-svg-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'svgComponent.description' | transloco }}</h2>\n <p class=\"description\">\n {{ 'svgComponent.descriptionText' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n <div class=\"icons-showcase\">\n @for (icon of icons; track icon.id) {\n <div class=\"icon-card\">\n <div class=\"icon-display\" [innerHTML]=\"getSafeHtml(icon.svg)\"></div>\n <div class=\"icon-name\">{{ icon.name }}</div>\n <div class=\"icon-id\">{{ icon.id }}</div>\n <code class=\"icon-tag\"><{{ icon.id }}></code>\n </div>\n }\n </div>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n <ol>\n <li>{{ 'svgComponent.step1' | transloco }}</li>\n <li>{{ 'svgComponent.step2' | transloco }}</li>\n <li>{{ 'svgComponent.step3' | transloco }}</li>\n </ol>\n </div>\n </section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}.component-section{margin-bottom:40px}.component-section h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}.component-section h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.component-section .description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-200);border-radius:8px;transition:all .3s ease;cursor:pointer}.icon-card:hover{border-color:var(--dd-base-200);background:var(--dd-base-50);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.icon-card:hover .icon-display{transform:scale(1.1);color:var(--dd-base-0)}.icon-display{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--dd-base-0);transition:all .3s ease}.icon-display ::ng-deep svg{width:100%;height:100%;fill:currentColor}.icon-name{font-size:14px;font-weight:500;color:var(--dd-base-600);margin-bottom:4px;text-align:center}.icon-id{font-size:12px;color:var(--dd-base-400);font-family:monospace;text-align:center}.icon-tag{font-size:11px;color:var(--dd-base-600);font-family:monospace;background:var(--dd-base-200);padding:4px 8px;border-radius:4px;margin-top:8px;text-align:center;border:1px solid var(--dd-base-300)}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
2179
2187
|
}
|
|
2180
2188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SvgBlock, decorators: [{
|
|
2181
2189
|
type: Component,
|
|
2182
|
-
args: [{ selector: 'app-svg-block', imports: [TranslocoPipe], template: "<div class=\"demo-container\">\n <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'svgComponent.description' | transloco }}</h2>\n <p class=\"description\">\n {{ 'svgComponent.descriptionText' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n <div class=\"icons-showcase\">\n @for (icon of icons; track icon.id) {\n <div class=\"icon-card\">\n <div class=\"icon-display\" [innerHTML]=\"icon.svg\"></div>\n <div class=\"icon-name\">{{ icon.name }}</div>\n <div class=\"icon-id\">{{ icon.id }}</div>\n <code class=\"icon-tag\"><{{ icon.id }}></code>\n </div>\n }\n </div>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n <ol>\n <li>{{ 'svgComponent.step1' | transloco }}</li>\n <li>{{ 'svgComponent.step2' | transloco }}</li>\n <li>{{ 'svgComponent.step3' | transloco }}</li>\n </ol>\n </div>\n </section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}.component-section{margin-bottom:40px}.component-section h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}.component-section h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.component-section .description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-
|
|
2183
|
-
}] });
|
|
2190
|
+
args: [{ selector: 'app-svg-block', imports: [TranslocoPipe], template: "<div class=\"demo-container\">\n <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'svgComponent.description' | transloco }}</h2>\n <p class=\"description\">\n {{ 'svgComponent.descriptionText' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n <div class=\"icons-showcase\">\n @for (icon of icons; track icon.id) {\n <div class=\"icon-card\">\n <div class=\"icon-display\" [innerHTML]=\"getSafeHtml(icon.svg)\"></div>\n <div class=\"icon-name\">{{ icon.name }}</div>\n <div class=\"icon-id\">{{ icon.id }}</div>\n <code class=\"icon-tag\"><{{ icon.id }}></code>\n </div>\n }\n </div>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n <ol>\n <li>{{ 'svgComponent.step1' | transloco }}</li>\n <li>{{ 'svgComponent.step2' | transloco }}</li>\n <li>{{ 'svgComponent.step3' | transloco }}</li>\n </ol>\n </div>\n </section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}.component-section{margin-bottom:40px}.component-section h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}.component-section h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.component-section .description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-200);border-radius:8px;transition:all .3s ease;cursor:pointer}.icon-card:hover{border-color:var(--dd-base-200);background:var(--dd-base-50);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.icon-card:hover .icon-display{transform:scale(1.1);color:var(--dd-base-0)}.icon-display{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--dd-base-0);transition:all .3s ease}.icon-display ::ng-deep svg{width:100%;height:100%;fill:currentColor}.icon-name{font-size:14px;font-weight:500;color:var(--dd-base-600);margin-bottom:4px;text-align:center}.icon-id{font-size:12px;color:var(--dd-base-400);font-family:monospace;text-align:center}.icon-tag{font-size:11px;color:var(--dd-base-600);font-family:monospace;background:var(--dd-base-200);padding:4px 8px;border-radius:4px;margin-top:8px;text-align:center;border:1px solid var(--dd-base-300)}\n"] }]
|
|
2191
|
+
}], ctorParameters: () => [{ type: i1.DomSanitizer }] });
|
|
2184
2192
|
|
|
2185
2193
|
class MainDocumentationPage {
|
|
2186
2194
|
translocoService = inject(TranslocoService);
|
|
@@ -2196,7 +2204,7 @@ class MainDocumentationPage {
|
|
|
2196
2204
|
this.activeTab.set(tab);
|
|
2197
2205
|
}
|
|
2198
2206
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2199
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MainDocumentationPage, isStandalone: true, selector: "duck-dev-main-documentation-page", ngImport: i0, template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @if (activeTab().id === 'buttons') {\n <app-button-block />\n }\n @if (activeTab().id === 'loaders') {\n <app-loader-block />\n }\n @if (activeTab().id === 'tabs') {\n <app-tabs-block />\n }\n @if (activeTab().id === 'svg') {\n <app-svg-block />\n }\n</duck-dev-tab-vertical>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: SvgBlock, selector: "app-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }] });
|
|
2207
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MainDocumentationPage, isStandalone: true, selector: "duck-dev-main-documentation-page", ngImport: i0, template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @if (activeTab().id === 'buttons') {\n <app-button-block />\n }\n @if (activeTab().id === 'loaders') {\n <app-loader-block />\n }\n @if (activeTab().id === 'tabs') {\n <app-tabs-block />\n }\n @if (activeTab().id === 'svg') {\n <app-svg-block />\n }\n</duck-dev-tab-vertical>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: SvgBlock, selector: "app-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }] });
|
|
2200
2208
|
}
|
|
2201
2209
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, decorators: [{
|
|
2202
2210
|
type: Component,
|
|
@@ -2206,12 +2214,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2206
2214
|
TabsBlock,
|
|
2207
2215
|
SvgBlock,
|
|
2208
2216
|
DuckDevTabVertical
|
|
2209
|
-
], template: "<duck-dev-tab-vertical [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 @if (activeTab().id === 'svg') {\n <app-svg-block />\n }\n</duck-dev-tab-vertical>\n" }]
|
|
2217
|
+
], template: "<duck-dev-tab-vertical [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 @if (activeTab().id === 'svg') {\n <app-svg-block />\n }\n</duck-dev-tab-vertical>\n", styles: [":host{display:block;height:100%}\n"] }]
|
|
2210
2218
|
}] });
|
|
2211
2219
|
|
|
2212
2220
|
const DuckDevLibTranslations = {
|
|
2213
|
-
en: import('./duck-dev-lib-en-
|
|
2214
|
-
ru: import('./duck-dev-lib-ru-
|
|
2221
|
+
en: import('./duck-dev-lib-en-StaNZWYU.mjs'),
|
|
2222
|
+
ru: import('./duck-dev-lib-ru-CSq0J4ub.mjs')
|
|
2215
2223
|
};
|
|
2216
2224
|
|
|
2217
2225
|
/*
|