duck-dev-lib 0.0.22 → 0.0.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/fesm2022/{duck-dev-lib-en-DTcDPUsE.mjs → duck-dev-lib-en-Ze3k_kca.mjs} +43 -4
  2. package/fesm2022/{duck-dev-lib-en-DTcDPUsE.mjs.map → duck-dev-lib-en-Ze3k_kca.mjs.map} +1 -1
  3. package/fesm2022/{duck-dev-lib-ru-DFcYCj44.mjs → duck-dev-lib-ru-9TH2RJJD.mjs} +43 -4
  4. package/fesm2022/{duck-dev-lib-ru-DFcYCj44.mjs.map → duck-dev-lib-ru-9TH2RJJD.mjs.map} +1 -1
  5. package/fesm2022/duck-dev-lib.mjs +93 -7
  6. package/fesm2022/duck-dev-lib.mjs.map +1 -1
  7. package/package.json +1 -1
  8. package/types/duck-dev-lib.d.ts +23 -1
package/fesm2022/{duck-dev-lib-en-DTcDPUsE.mjs → duck-dev-lib-en-Ze3k_kca.mjs} RENAMED
@@ -4,7 +4,9 @@ var tabs = {
4
4
  tabs: "Tabs",
5
5
  svg: "SVG icon",
6
6
  input: "Input",
7
- notifications: "Notifications"
7
+ notifications: "Notifications",
8
+ badge: "Badges",
9
+ directives: "Directives"
8
10
  };
9
11
  var notifications = {
10
12
  title: "Duck Dev UI Library - Notifications",
@@ -272,6 +274,41 @@ var inputComponent = {
272
274
  exampleComponent: "Component with Form Example"
273
275
  }
274
276
  };
277
+ var badgeDoc = {
278
+ title: "Duck Dev UI Library - Badges",
279
+ badgeTitle: "Badge",
280
+ description: "Badge is a compact element that displays status, category or short piece of information. It supports color palette, size and visual variants.",
281
+ usage: "Usage",
282
+ inputs: "Inputs",
283
+ required: "required",
284
+ inputText: "text that will be displayed inside the badge",
285
+ inputColor: "color from palette: Violet | Orange | White | Gray | Dark",
286
+ inputVariant: "visual style: solid | soft | outline",
287
+ inputSize: "badge size: sm | md",
288
+ examples: "Examples",
289
+ solidViolet: "Solid / Violet",
290
+ solidOrange: "Solid / Orange",
291
+ solidGray: "Solid / Gray",
292
+ softViolet: "Soft / Violet",
293
+ softDark: "Soft / Dark",
294
+ softWhite: "Soft / White",
295
+ outlineViolet: "Outline / Violet",
296
+ outlineOrange: "Outline / Orange",
297
+ outlineGraySm: "Outline / Gray (sm)"
298
+ };
299
+ var directivesDoc = {
300
+ title: "Directives",
301
+ ddFlexTitle: "ddFlex",
302
+ ddFlexDescription: "ddFlex is a simple centering and layout directive. It sets display:flex and centers content by default. You can control direction via ddFlexDirection (row | col) and spacing via gap (px, rem, etc.).",
303
+ usage: "Usage",
304
+ inputs: "Inputs",
305
+ inputDirection: "layout direction: 'row' | 'col' (default: 'row')",
306
+ inputGap: "space between children: number (px) or string like '12px', '0.5rem'. Default: null",
307
+ examples: "Examples",
308
+ row8: "Row with 8px gap",
309
+ col12: "Column with 12px gap",
310
+ row1rem: "Row with 1rem gap (string)"
311
+ };
275
312
  var en = {
276
313
  tabs: tabs,
277
314
  notifications: notifications,
@@ -279,8 +316,10 @@ var en = {
279
316
  loaders: loaders,
280
317
  tabsComponent: tabsComponent,
281
318
  svgComponent: svgComponent,
282
- inputComponent: inputComponent
319
+ inputComponent: inputComponent,
320
+ badgeDoc: badgeDoc,
321
+ directivesDoc: directivesDoc
283
322
  };
284
323
 
285
- export { buttons, en as default, inputComponent, loaders, notifications, svgComponent, tabs, tabsComponent };
286
- //# sourceMappingURL=duck-dev-lib-en-DTcDPUsE.mjs.map
324
+ export { badgeDoc, buttons, en as default, directivesDoc, inputComponent, loaders, notifications, svgComponent, tabs, tabsComponent };
325
+ //# sourceMappingURL=duck-dev-lib-en-Ze3k_kca.mjs.map
package/fesm2022/{duck-dev-lib-en-DTcDPUsE.mjs.map → duck-dev-lib-en-Ze3k_kca.mjs.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"duck-dev-lib-en-DTcDPUsE.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"duck-dev-lib-en-Ze3k_kca.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/fesm2022/{duck-dev-lib-ru-DFcYCj44.mjs → duck-dev-lib-ru-9TH2RJJD.mjs} RENAMED
@@ -4,7 +4,9 @@ var tabs = {
4
4
  tabs: "Вкладки",
5
5
  svg: "SVG icon",
6
6
  input: "Вввод",
7
- notifications: "Уведомления"
7
+ notifications: "Уведомления",
8
+ badge: "Бейджи",
9
+ directives: "Директивы"
8
10
  };
9
11
  var notifications = {
10
12
  title: "Duck Dev UI Library - Уведомления",
@@ -272,6 +274,41 @@ var inputComponent = {
272
274
  exampleComponent: "Компонент с примером формы"
273
275
  }
274
276
  };
277
+ var badgeDoc = {
278
+ title: "Duck Dev UI Library - Бейджи",
279
+ badgeTitle: "Бейдж",
280
+ description: "Бейдж — компактный элемент, который отображает статус, категорию или короткую информацию. Поддерживает палитру цветов, размеры и визуальные варианты.",
281
+ usage: "Использование",
282
+ inputs: "Входные параметры",
283
+ required: "обязательный",
284
+ inputText: "текст, который будет отображаться внутри бейджа",
285
+ inputColor: "цвет из палитры: Violet | Orange | White | Gray | Dark",
286
+ inputVariant: "визуальный стиль: solid | soft | outline",
287
+ inputSize: "размер бейджа: sm | md",
288
+ examples: "Примеры",
289
+ solidViolet: "Solid / Violet",
290
+ solidOrange: "Solid / Orange",
291
+ solidGray: "Solid / Gray",
292
+ softViolet: "Soft / Violet",
293
+ softDark: "Soft / Dark",
294
+ softWhite: "Soft / White",
295
+ outlineViolet: "Outline / Violet",
296
+ outlineOrange: "Outline / Orange",
297
+ outlineGraySm: "Outline / Gray (sm)"
298
+ };
299
+ var directivesDoc = {
300
+ title: "Директивы",
301
+ ddFlexTitle: "ddFlex",
302
+ ddFlexDescription: "ddFlex — простая директива для центрирования и лейаута. По умолчанию устанавливает display:flex и выравнивает содержимое по центру. Можно управлять направлением через ddFlexDirection (row | col) и расстоянием между элементами через gap (px, rem и т. п.).",
303
+ usage: "Использование",
304
+ inputs: "Входные параметры",
305
+ inputDirection: "направление раскладки: 'row' | 'col' (по умолчанию: 'row')",
306
+ inputGap: "расстояние между дочерними элементами: number (px) или string, например '12px', '0.5rem'. По умолчанию: null",
307
+ examples: "Примеры",
308
+ row8: "Row с отступом 8px",
309
+ col12: "Column с отступом 12px",
310
+ row1rem: "Row с отступом 1rem (string)"
311
+ };
275
312
  var ru = {
276
313
  tabs: tabs,
277
314
  notifications: notifications,
@@ -279,8 +316,10 @@ var ru = {
279
316
  loaders: loaders,
280
317
  tabsComponent: tabsComponent,
281
318
  svgComponent: svgComponent,
282
- inputComponent: inputComponent
319
+ inputComponent: inputComponent,
320
+ badgeDoc: badgeDoc,
321
+ directivesDoc: directivesDoc
283
322
  };
284
323
 
285
- export { buttons, ru as default, inputComponent, loaders, notifications, svgComponent, tabs, tabsComponent };
286
- //# sourceMappingURL=duck-dev-lib-ru-DFcYCj44.mjs.map
324
+ export { badgeDoc, buttons, ru as default, directivesDoc, inputComponent, loaders, notifications, svgComponent, tabs, tabsComponent };
325
+ //# sourceMappingURL=duck-dev-lib-ru-9TH2RJJD.mjs.map
package/fesm2022/{duck-dev-lib-ru-DFcYCj44.mjs.map → duck-dev-lib-ru-9TH2RJJD.mjs.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"duck-dev-lib-ru-DFcYCj44.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"duck-dev-lib-ru-9TH2RJJD.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/fesm2022/duck-dev-lib.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { input, computed, Component, output, signal, viewChildren, effect, Injectable, inject, ElementRef } from '@angular/core';
2
+ import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect, Injectable, inject, ElementRef } from '@angular/core';
3
3
  import { NgStyle, CommonModule } from '@angular/common';
4
4
  import * as i1$2 from '@jsverse/transloco';
5
5
  import { TranslocoPipe, TranslocoModule, TranslocoService } from '@jsverse/transloco';
@@ -16,6 +16,47 @@ var ButtonEnumColor;
16
16
  ButtonEnumColor["Violet"] = "violet";
17
17
  })(ButtonEnumColor || (ButtonEnumColor = {}));
18
18
 
19
+ class DdFlexDirectionDirective {
20
+ ddFlexDirection = input('row', { ...(ngDevMode ? { debugName: "ddFlexDirection" } : {}) });
21
+ gap = input(null, { ...(ngDevMode ? { debugName: "gap" } : {}) });
22
+ display = 'flex';
23
+ alignItems = 'center';
24
+ justifyContent = 'center';
25
+ get flexDirection() {
26
+ return this.ddFlexDirection() === 'col' ? 'column' : 'row';
27
+ }
28
+ get gapValue() {
29
+ const value = this.gap();
30
+ if (value == null)
31
+ return null;
32
+ return typeof value === 'number' ? `${value}px` : value;
33
+ }
34
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DdFlexDirectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
35
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: DdFlexDirectionDirective, isStandalone: true, selector: "[ddFlex]", inputs: { ddFlexDirection: { classPropertyName: "ddFlexDirection", publicName: "ddFlexDirection", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "this.display", "style.alignItems": "this.alignItems", "style.justifyContent": "this.justifyContent", "style.flexDirection": "this.flexDirection", "style.gap": "this.gapValue" } }, ngImport: i0 });
36
+ }
37
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DdFlexDirectionDirective, decorators: [{
38
+ type: Directive,
39
+ args: [{
40
+ selector: '[ddFlex]',
41
+ standalone: true,
42
+ }]
43
+ }], propDecorators: { ddFlexDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "ddFlexDirection", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], display: [{
44
+ type: HostBinding,
45
+ args: ['style.display']
46
+ }], alignItems: [{
47
+ type: HostBinding,
48
+ args: ['style.alignItems']
49
+ }], justifyContent: [{
50
+ type: HostBinding,
51
+ args: ['style.justifyContent']
52
+ }], flexDirection: [{
53
+ type: HostBinding,
54
+ args: ['style.flexDirection']
55
+ }], gapValue: [{
56
+ type: HostBinding,
57
+ args: ['style.gap']
58
+ }] } });
59
+
19
60
  class ButtonBlurLift {
20
61
  textButton = input.required({ ...(ngDevMode ? { debugName: "textButton" } : {}) });
21
62
  colorButton = input(ButtonEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
@@ -2248,6 +2289,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
2248
2289
  `, styles: [":host{display:contents}\n"] }]
2249
2290
  }] });
2250
2291
 
2292
+ class Badge {
2293
+ text = input('', { ...(ngDevMode ? { debugName: "text" } : {}) });
2294
+ color = input(ButtonEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
2295
+ variant = input('solid', { ...(ngDevMode ? { debugName: "variant" } : {}) });
2296
+ size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
2297
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Badge, deps: [], target: i0.ɵɵFactoryTarget.Component });
2298
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: Badge, isStandalone: true, selector: "dd-badge", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"8\">\n <span\n class=\"dd-badge\"\n [attr.data-variant]=\"variant()\"\n [attr.data-color]=\"color()\"\n [attr.data-size]=\"size()\"\n >\n {{ text() }}\n </span>\n</div>\n", styles: [":host{display:block}.dd-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:600;border-radius:9999px;line-height:1;border:1px solid transparent;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color .2s ease,color .2s ease,border-color .2s ease}.dd-badge[data-size=sm]{font-size:12px;padding:4px 8px;gap:6px}.dd-badge[data-size=md]{font-size:14px;padding:6px 10px;gap:8px}.dd-badge[data-variant=solid][data-color=violet]{background:var(--dd-base-accent-blue);color:var(--dd-base-0)}.dd-badge[data-variant=solid][data-color=orange]{background:var(--dd-base-accent-orange);color:var(--dd-base-0)}.dd-badge[data-variant=solid][data-color=gray]{background:var(--dd-base-200);color:var(--dd-base-600)}.dd-badge[data-variant=solid][data-color=dark]{background:var(--dd-base-700);color:var(--dd-base-0)}.dd-badge[data-variant=solid][data-color=white]{background:var(--dd-base-0);color:var(--dd-base-600);border-color:var(--dd-base-300)}.dd-badge[data-variant=soft][data-color=violet]{background:color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent);color:var(--dd-base-accent-blue);border-color:color-mix(in srgb,var(--dd-base-accent-blue) 30%,transparent)}.dd-badge[data-variant=soft][data-color=orange]{background:color-mix(in srgb,var(--dd-base-accent-orange) 14%,transparent);color:var(--dd-base-accent-orange);border-color:color-mix(in srgb,var(--dd-base-accent-orange) 30%,transparent)}.dd-badge[data-variant=soft][data-color=gray]{background:var(--dd-base-100);color:var(--dd-base-600);border-color:var(--dd-base-300)}.dd-badge[data-variant=soft][data-color=dark]{background:var(--dd-base-200);color:var(--dd-base-700);border-color:var(--dd-base-400)}.dd-badge[data-variant=soft][data-color=white]{background:var(--dd-base-0);color:var(--dd-base-600);border-color:var(--dd-base-300)}.dd-badge[data-variant=outline]{background:transparent}.dd-badge[data-variant=outline][data-color=violet]{color:var(--dd-base-accent-blue);border-color:var(--dd-base-accent-blue)}.dd-badge[data-variant=outline][data-color=orange]{color:var(--dd-base-accent-orange);border-color:var(--dd-base-accent-orange)}.dd-badge[data-variant=outline][data-color=gray]{color:var(--dd-base-600);border-color:var(--dd-base-400)}.dd-badge[data-variant=outline][data-color=dark]{color:var(--dd-base-700);border-color:var(--dd-base-600)}.dd-badge[data-variant=outline][data-color=white]{color:var(--dd-base-600);border-color:var(--dd-base-300)}\n"], dependencies: [{ kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap"] }] });
2299
+ }
2300
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Badge, decorators: [{
2301
+ type: Component,
2302
+ args: [{ selector: 'dd-badge', standalone: true, imports: [
2303
+ DdFlexDirectionDirective
2304
+ ], template: "<div ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"8\">\n <span\n class=\"dd-badge\"\n [attr.data-variant]=\"variant()\"\n [attr.data-color]=\"color()\"\n [attr.data-size]=\"size()\"\n >\n {{ text() }}\n </span>\n</div>\n", styles: [":host{display:block}.dd-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:600;border-radius:9999px;line-height:1;border:1px solid transparent;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color .2s ease,color .2s ease,border-color .2s ease}.dd-badge[data-size=sm]{font-size:12px;padding:4px 8px;gap:6px}.dd-badge[data-size=md]{font-size:14px;padding:6px 10px;gap:8px}.dd-badge[data-variant=solid][data-color=violet]{background:var(--dd-base-accent-blue);color:var(--dd-base-0)}.dd-badge[data-variant=solid][data-color=orange]{background:var(--dd-base-accent-orange);color:var(--dd-base-0)}.dd-badge[data-variant=solid][data-color=gray]{background:var(--dd-base-200);color:var(--dd-base-600)}.dd-badge[data-variant=solid][data-color=dark]{background:var(--dd-base-700);color:var(--dd-base-0)}.dd-badge[data-variant=solid][data-color=white]{background:var(--dd-base-0);color:var(--dd-base-600);border-color:var(--dd-base-300)}.dd-badge[data-variant=soft][data-color=violet]{background:color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent);color:var(--dd-base-accent-blue);border-color:color-mix(in srgb,var(--dd-base-accent-blue) 30%,transparent)}.dd-badge[data-variant=soft][data-color=orange]{background:color-mix(in srgb,var(--dd-base-accent-orange) 14%,transparent);color:var(--dd-base-accent-orange);border-color:color-mix(in srgb,var(--dd-base-accent-orange) 30%,transparent)}.dd-badge[data-variant=soft][data-color=gray]{background:var(--dd-base-100);color:var(--dd-base-600);border-color:var(--dd-base-300)}.dd-badge[data-variant=soft][data-color=dark]{background:var(--dd-base-200);color:var(--dd-base-700);border-color:var(--dd-base-400)}.dd-badge[data-variant=soft][data-color=white]{background:var(--dd-base-0);color:var(--dd-base-600);border-color:var(--dd-base-300)}.dd-badge[data-variant=outline]{background:transparent}.dd-badge[data-variant=outline][data-color=violet]{color:var(--dd-base-accent-blue);border-color:var(--dd-base-accent-blue)}.dd-badge[data-variant=outline][data-color=orange]{color:var(--dd-base-accent-orange);border-color:var(--dd-base-accent-orange)}.dd-badge[data-variant=outline][data-color=gray]{color:var(--dd-base-600);border-color:var(--dd-base-400)}.dd-badge[data-variant=outline][data-color=dark]{color:var(--dd-base-700);border-color:var(--dd-base-600)}.dd-badge[data-variant=outline][data-color=white]{color:var(--dd-base-600);border-color:var(--dd-base-300)}\n"] }]
2305
+ }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
2306
+
2307
+ class BadgeBlock {
2308
+ colorViolet = ButtonEnumColor.Violet;
2309
+ colorOrange = ButtonEnumColor.Orange;
2310
+ colorWhite = ButtonEnumColor.White;
2311
+ colorGray = ButtonEnumColor.Gray;
2312
+ colorDark = ButtonEnumColor.Dark;
2313
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
2314
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: BadgeBlock, isStandalone: true, selector: "app-badge-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <section class=\"component-section\">\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <p class=\"description\">\n {{ 'badgeDoc.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code>&lt;dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> ({{ 'badgeDoc.required' | transloco }}) \u2013 {{ 'badgeDoc.inputText' | transloco }}</li>\n <li><strong>color</strong> \u2013 {{ 'badgeDoc.inputColor' | transloco }}</li>\n <li><strong>variant</strong> \u2013 {{ 'badgeDoc.inputVariant' | transloco }}</li>\n <li><strong>size</strong> \u2013 {{ 'badgeDoc.inputSize' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item dd-badge{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
2315
+ }
2316
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, decorators: [{
2317
+ type: Component,
2318
+ args: [{ selector: 'app-badge-block', standalone: true, imports: [
2319
+ Badge,
2320
+ TranslocoPipe
2321
+ ], template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <section class=\"component-section\">\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <p class=\"description\">\n {{ 'badgeDoc.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code>&lt;dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> ({{ 'badgeDoc.required' | transloco }}) \u2013 {{ 'badgeDoc.inputText' | transloco }}</li>\n <li><strong>color</strong> \u2013 {{ 'badgeDoc.inputColor' | transloco }}</li>\n <li><strong>variant</strong> \u2013 {{ 'badgeDoc.inputVariant' | transloco }}</li>\n <li><strong>size</strong> \u2013 {{ 'badgeDoc.inputSize' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item dd-badge{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
2322
+ }] });
2323
+
2324
+ class DirectiveBlock {
2325
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DirectiveBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
2326
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: DirectiveBlock, isStandalone: true, selector: "app-directive-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'directivesDoc.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'directivesDoc.ddFlexTitle' | transloco }}</h2>\n <p class=\"description\">\n {{ 'directivesDoc.ddFlexDescription' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'directivesDoc.usage' | transloco }}</h3>\n <pre><code>&lt;div ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"12\"&gt;\n &lt;span&gt;Item 1&lt;/span&gt;\n &lt;span&gt;Item 2&lt;/span&gt;\n&lt;/div&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'directivesDoc.inputs' | transloco }}</h3>\n <ul>\n <li><strong>ddFlexDirection</strong> \u2013 {{ 'directivesDoc.inputDirection' | transloco }}</li>\n <li><strong>gap</strong> \u2013 {{ 'directivesDoc.inputGap' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'directivesDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.row8' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"8\">\n <span class=\"chip\">A</span>\n <span class=\"chip\">B</span>\n <span class=\"chip\">C</span>\n </div>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.col12' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'col'\" [gap]=\"12\">\n <span class=\"chip\">One</span>\n <span class=\"chip\">Two</span>\n <span class=\"chip\">Three</span>\n </div>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.row1rem' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"'1rem'\">\n <span class=\"chip\">Left</span>\n <span class=\"chip\">Right</span>\n </div>\n </div>\n </div>\n\n </div>\n </section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item .demo-box{width:100%;min-height:60px;padding:12px;border-radius:8px;background:var(--dd-base-0);border:1px dashed var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .chip{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--dd-base-600);background:var(--dd-base-100);border:1px solid var(--dd-base-300)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
2327
+ }
2328
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DirectiveBlock, decorators: [{
2329
+ type: Component,
2330
+ args: [{ selector: 'app-directive-block', standalone: true, imports: [DdFlexDirectionDirective, TranslocoPipe], template: "<div class=\"demo-container\">\n <h1>{{ 'directivesDoc.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'directivesDoc.ddFlexTitle' | transloco }}</h2>\n <p class=\"description\">\n {{ 'directivesDoc.ddFlexDescription' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'directivesDoc.usage' | transloco }}</h3>\n <pre><code>&lt;div ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"12\"&gt;\n &lt;span&gt;Item 1&lt;/span&gt;\n &lt;span&gt;Item 2&lt;/span&gt;\n&lt;/div&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'directivesDoc.inputs' | transloco }}</h3>\n <ul>\n <li><strong>ddFlexDirection</strong> \u2013 {{ 'directivesDoc.inputDirection' | transloco }}</li>\n <li><strong>gap</strong> \u2013 {{ 'directivesDoc.inputGap' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'directivesDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.row8' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"8\">\n <span class=\"chip\">A</span>\n <span class=\"chip\">B</span>\n <span class=\"chip\">C</span>\n </div>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.col12' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'col'\" [gap]=\"12\">\n <span class=\"chip\">One</span>\n <span class=\"chip\">Two</span>\n <span class=\"chip\">Three</span>\n </div>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.row1rem' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"'1rem'\">\n <span class=\"chip\">Left</span>\n <span class=\"chip\">Right</span>\n </div>\n </div>\n </div>\n\n </div>\n </section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item .demo-box{width:100%;min-height:60px;padding:12px;border-radius:8px;background:var(--dd-base-0);border:1px dashed var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .chip{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--dd-base-600);background:var(--dd-base-100);border:1px solid var(--dd-base-300)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
2331
+ }] });
2332
+
2251
2333
  class MainDocumentationPage {
2252
2334
  translocoService = inject(TranslocoService);
2253
2335
  title = signal('demo', { ...(ngDevMode ? { debugName: "title" } : {}) });
@@ -2255,6 +2337,8 @@ class MainDocumentationPage {
2255
2337
  { id: 'buttons', label: this.translocoService.translate('tabs.buttons') },
2256
2338
  { id: 'loaders', label: this.translocoService.translate('tabs.loaders') },
2257
2339
  { id: 'tabs', label: this.translocoService.translate('tabs.tabs') },
2340
+ { id: 'badge', label: this.translocoService.translate('tabs.badge') },
2341
+ { id: 'directives', label: this.translocoService.translate('tabs.directives') },
2258
2342
  { id: 'input', label: this.translocoService.translate('tabs.input') },
2259
2343
  { id: 'notifications', label: this.translocoService.translate('tabs.notifications') },
2260
2344
  { id: 'svg', label: this.translocoService.translate('tabs.svg') }
@@ -2264,7 +2348,7 @@ class MainDocumentationPage {
2264
2348
  this.activeTab.set(tab);
2265
2349
  }
2266
2350
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
2267
- 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 === 'input'){\n <app-input-block />\n }\n @if(activeTab().id === 'notifications'){\n <app-notification-block />\n }\n @if (activeTab().id === 'svg') {\n <app-duck-dev-svg-block />\n }\n</duck-dev-tab-vertical>\n\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: DuckDevSvgBlock, selector: "app-duck-dev-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: InputBlock, selector: "app-input-block" }, { kind: "component", type: NotificationBlock, selector: "app-notification-block" }, { kind: "component", type: DuckDevNotificationContainer, selector: "duck-dev-notification-container" }] });
2351
+ 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 === 'badge') {\n <app-badge-block />\n }\n @if (activeTab().id === 'directives') {\n <app-directive-block />\n }\n @if(activeTab().id === 'input'){\n <app-input-block />\n }\n @if(activeTab().id === 'notifications'){\n <app-notification-block />\n }\n @if (activeTab().id === 'svg') {\n <app-duck-dev-svg-block />\n }\n</duck-dev-tab-vertical>\n\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: DuckDevSvgBlock, selector: "app-duck-dev-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: InputBlock, selector: "app-input-block" }, { kind: "component", type: NotificationBlock, selector: "app-notification-block" }, { kind: "component", type: DuckDevNotificationContainer, selector: "duck-dev-notification-container" }, { kind: "component", type: BadgeBlock, selector: "app-badge-block" }, { kind: "component", type: DirectiveBlock, selector: "app-directive-block" }] });
2268
2352
  }
2269
2353
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, decorators: [{
2270
2354
  type: Component,
@@ -2276,13 +2360,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
2276
2360
  DuckDevTabVertical,
2277
2361
  InputBlock,
2278
2362
  NotificationBlock,
2279
- DuckDevNotificationContainer
2280
- ], 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 === 'input'){\n <app-input-block />\n }\n @if(activeTab().id === 'notifications'){\n <app-notification-block />\n }\n @if (activeTab().id === 'svg') {\n <app-duck-dev-svg-block />\n }\n</duck-dev-tab-vertical>\n\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"] }]
2363
+ DuckDevNotificationContainer,
2364
+ BadgeBlock,
2365
+ DirectiveBlock
2366
+ ], 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 === 'badge') {\n <app-badge-block />\n }\n @if (activeTab().id === 'directives') {\n <app-directive-block />\n }\n @if(activeTab().id === 'input'){\n <app-input-block />\n }\n @if(activeTab().id === 'notifications'){\n <app-notification-block />\n }\n @if (activeTab().id === 'svg') {\n <app-duck-dev-svg-block />\n }\n</duck-dev-tab-vertical>\n\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"] }]
2281
2367
  }] });
2282
2368
 
2283
2369
  const DuckDevLibTranslations = {
2284
- en: import('./duck-dev-lib-en-DTcDPUsE.mjs'),
2285
- ru: import('./duck-dev-lib-ru-DFcYCj44.mjs')
2370
+ en: import('./duck-dev-lib-en-Ze3k_kca.mjs'),
2371
+ ru: import('./duck-dev-lib-ru-9TH2RJJD.mjs')
2286
2372
  };
2287
2373
 
2288
2374
  /*
@@ -2293,5 +2379,5 @@ const DuckDevLibTranslations = {
2293
2379
  * Generated bundle index. Do not edit.
2294
2380
  */
2295
2381
 
2296
- export { ButtonBlurLift, ButtonCasper, ButtonEnumColor, ButtonFlip, ButtonGlideOver, DuckDevIcon, DuckDevInput, DuckDevLibTranslations, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevTab, DuckDevTabVertical, LoaderClassic, LoaderLoadingBubble, LoaderThreeDots, MainDocumentationPage };
2382
+ export { Badge, ButtonBlurLift, ButtonCasper, ButtonEnumColor, ButtonFlip, ButtonGlideOver, DdFlexDirectionDirective, DuckDevIcon, DuckDevInput, DuckDevLibTranslations, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevTab, DuckDevTabVertical, LoaderClassic, LoaderLoadingBubble, LoaderThreeDots, MainDocumentationPage };
2297
2383
  //# sourceMappingURL=duck-dev-lib.mjs.map