duck-dev-lib 0.0.80 → 0.0.81
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-documentation-en-XYugblp4.mjs → duck-dev-lib-documentation-en-CEWt7DRN.mjs} +7 -2
- package/fesm2022/{duck-dev-lib-documentation-ru-BBQhEnLr.mjs.map → duck-dev-lib-documentation-en-CEWt7DRN.mjs.map} +1 -1
- package/fesm2022/{duck-dev-lib-documentation-ru-BBQhEnLr.mjs → duck-dev-lib-documentation-ru-LHt-QMeL.mjs} +7 -2
- package/fesm2022/{duck-dev-lib-documentation-en-XYugblp4.mjs.map → duck-dev-lib-documentation-ru-LHt-QMeL.mjs.map} +1 -1
- package/fesm2022/duck-dev-lib-documentation.mjs +11 -6
- package/fesm2022/duck-dev-lib-documentation.mjs.map +1 -1
- package/fesm2022/duck-dev-lib.mjs +7 -2
- package/fesm2022/duck-dev-lib.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -699,7 +699,12 @@ var badgeDoc = {
|
|
|
699
699
|
softWhite: "Soft / White",
|
|
700
700
|
outlineViolet: "Outline / Violet",
|
|
701
701
|
outlineOrange: "Outline / Orange",
|
|
702
|
-
outlineGraySm: "Outline / Gray (sm)"
|
|
702
|
+
outlineGraySm: "Outline / Gray (sm)",
|
|
703
|
+
neoBadgeTitle: "Neobrutalism Badge",
|
|
704
|
+
neoUsage: "Neobrutalism usage",
|
|
705
|
+
neoSlab: "Slab",
|
|
706
|
+
neoStamp: "Stamp",
|
|
707
|
+
neoTicket: "Ticket"
|
|
703
708
|
};
|
|
704
709
|
var progressDoc = {
|
|
705
710
|
title: "Duck Dev UI Library - Progress Bars",
|
|
@@ -1004,4 +1009,4 @@ var en = {
|
|
|
1004
1009
|
};
|
|
1005
1010
|
|
|
1006
1011
|
export { accordionDoc, badgeDoc, breadcrumbDoc, buttons, cardDoc, en as default, directivesDoc, documentationStyleTabs, inputComponent, loaders, modalDoc, notifications, progressDoc, quickStart, segmentDoc, selectorDoc, slider, speakerBubbleDoc, svgComponent, tabs, tabsComponent, tooltipDoc };
|
|
1007
|
-
//# sourceMappingURL=duck-dev-lib-documentation-en-
|
|
1012
|
+
//# sourceMappingURL=duck-dev-lib-documentation-en-CEWt7DRN.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"duck-dev-lib-documentation-
|
|
1
|
+
{"version":3,"file":"duck-dev-lib-documentation-en-CEWt7DRN.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -655,7 +655,12 @@ var badgeDoc = {
|
|
|
655
655
|
softWhite: "Soft / White",
|
|
656
656
|
outlineViolet: "Outline / Violet",
|
|
657
657
|
outlineOrange: "Outline / Orange",
|
|
658
|
-
outlineGraySm: "Outline / Gray (sm)"
|
|
658
|
+
outlineGraySm: "Outline / Gray (sm)",
|
|
659
|
+
neoBadgeTitle: "Neobrutalism Бейдж",
|
|
660
|
+
neoUsage: "Neobrutalism использование",
|
|
661
|
+
neoSlab: "Slab",
|
|
662
|
+
neoStamp: "Stamp",
|
|
663
|
+
neoTicket: "Ticket"
|
|
659
664
|
};
|
|
660
665
|
var progressDoc = {
|
|
661
666
|
title: "Duck Dev UI Library - Progress Bar",
|
|
@@ -959,4 +964,4 @@ var ru = {
|
|
|
959
964
|
};
|
|
960
965
|
|
|
961
966
|
export { accordionDoc, badgeDoc, breadcrumbDoc, buttons, cardDoc, ru as default, directivesDoc, documentationStyleTabs, inputComponent, loaders, modalDoc, notifications, progressDoc, quickStart, segmentDoc, selectorDoc, slider, speakerBubbleDoc, svgComponent, tabs, tabsComponent };
|
|
962
|
-
//# sourceMappingURL=duck-dev-lib-documentation-ru-
|
|
967
|
+
//# sourceMappingURL=duck-dev-lib-documentation-ru-LHt-QMeL.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"duck-dev-lib-documentation-
|
|
1
|
+
{"version":3,"file":"duck-dev-lib-documentation-ru-LHt-QMeL.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -475,6 +475,7 @@ function getNeobrutalBadgeStyle(color) {
|
|
|
475
475
|
'--dd-neo-badge-border': 'var(--dd-neo-ink)',
|
|
476
476
|
'--dd-neo-badge-shadow': 'var(--dd-neo-ana-6)',
|
|
477
477
|
'--dd-neo-badge-accent': 'var(--dd-neo-ana-1)',
|
|
478
|
+
'--dd-neo-badge-accent-contrast': 'var(--dd-neo-ana-1-contrast)',
|
|
478
479
|
};
|
|
479
480
|
case AccentEnumColor.Orange:
|
|
480
481
|
return {
|
|
@@ -483,6 +484,7 @@ function getNeobrutalBadgeStyle(color) {
|
|
|
483
484
|
'--dd-neo-badge-border': 'var(--dd-neo-ink)',
|
|
484
485
|
'--dd-neo-badge-shadow': 'var(--dd-neo-ana-5)',
|
|
485
486
|
'--dd-neo-badge-accent': 'var(--dd-neo-ana-1)',
|
|
487
|
+
'--dd-neo-badge-accent-contrast': 'var(--dd-neo-ana-1-contrast)',
|
|
486
488
|
};
|
|
487
489
|
case AccentEnumColor.Gray:
|
|
488
490
|
return {
|
|
@@ -491,6 +493,7 @@ function getNeobrutalBadgeStyle(color) {
|
|
|
491
493
|
'--dd-neo-badge-border': 'var(--dd-neo-ink)',
|
|
492
494
|
'--dd-neo-badge-shadow': 'var(--dd-neo-ana-6)',
|
|
493
495
|
'--dd-neo-badge-accent': 'var(--dd-neo-ana-2)',
|
|
496
|
+
'--dd-neo-badge-accent-contrast': 'var(--dd-neo-ana-2-contrast)',
|
|
494
497
|
};
|
|
495
498
|
case AccentEnumColor.Dark:
|
|
496
499
|
return {
|
|
@@ -499,6 +502,7 @@ function getNeobrutalBadgeStyle(color) {
|
|
|
499
502
|
'--dd-neo-badge-border': 'var(--dd-neo-ink)',
|
|
500
503
|
'--dd-neo-badge-shadow': 'var(--dd-neo-ana-3)',
|
|
501
504
|
'--dd-neo-badge-accent': 'var(--dd-neo-ana-1)',
|
|
505
|
+
'--dd-neo-badge-accent-contrast': 'var(--dd-neo-ana-1-contrast)',
|
|
502
506
|
};
|
|
503
507
|
case AccentEnumColor.White:
|
|
504
508
|
default:
|
|
@@ -508,6 +512,7 @@ function getNeobrutalBadgeStyle(color) {
|
|
|
508
512
|
'--dd-neo-badge-border': 'var(--dd-neo-ink)',
|
|
509
513
|
'--dd-neo-badge-shadow': 'var(--dd-neo-ana-5)',
|
|
510
514
|
'--dd-neo-badge-accent': 'var(--dd-neo-ana-6)',
|
|
515
|
+
'--dd-neo-badge-accent-contrast': 'var(--dd-neo-ana-6-contrast)',
|
|
511
516
|
};
|
|
512
517
|
}
|
|
513
518
|
}
|
|
@@ -532,11 +537,11 @@ class BadgeNeobrutalStamp {
|
|
|
532
537
|
size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
|
|
533
538
|
badgeStyle = computed(() => getNeobrutalBadgeStyle(this.color()), { ...(ngDevMode ? { debugName: "badgeStyle" } : {}) });
|
|
534
539
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
535
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: BadgeNeobrutalStamp, isStandalone: true, selector: "dd-badge-neobrutal-stamp", inputs: { kicker: { classPropertyName: "kicker", publicName: "kicker", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"dd-badge-neo-stamp\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n <span class=\"dd-badge-neo-stamp__kicker\">{{ kicker() }}</span>\n <span>{{ text() }}</span>\n</span>\n", styles: [":host{display:inline-block}.dd-badge-neo-stamp{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-surface);color:var(--dd-neo-badge-text);box-shadow:4px 4px 0 var(--dd-neo-shadow);font-weight:900;line-height:1;white-space:nowrap;transform:rotate(-2deg)}.dd-badge-neo-stamp[data-size=sm]{padding:5px 8px;font-size:11px}.dd-badge-neo-stamp[data-size=md]{padding:7px 10px;font-size:12px}.dd-badge-neo-stamp__kicker{display:inline-flex;align-items:center;padding:4px 6px;border:2px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-accent);letter-spacing:.12em;text-transform:uppercase}\n"] });
|
|
540
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: BadgeNeobrutalStamp, isStandalone: true, selector: "dd-badge-neobrutal-stamp", inputs: { kicker: { classPropertyName: "kicker", publicName: "kicker", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"dd-badge-neo-stamp\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n <span class=\"dd-badge-neo-stamp__kicker\">{{ kicker() }}</span>\n <span>{{ text() }}</span>\n</span>\n", styles: [":host{display:inline-block}.dd-badge-neo-stamp{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-surface);color:var(--dd-neo-badge-text);box-shadow:4px 4px 0 var(--dd-neo-badge-shadow);font-weight:900;line-height:1;white-space:nowrap;transform:rotate(-2deg)}.dd-badge-neo-stamp[data-size=sm]{padding:5px 8px;font-size:11px}.dd-badge-neo-stamp[data-size=md]{padding:7px 10px;font-size:12px}.dd-badge-neo-stamp__kicker{display:inline-flex;align-items:center;padding:4px 6px;border:2px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-accent);color:var(--dd-neo-badge-accent-contrast);letter-spacing:.12em;text-transform:uppercase}\n"] });
|
|
536
541
|
}
|
|
537
542
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeNeobrutalStamp, decorators: [{
|
|
538
543
|
type: Component,
|
|
539
|
-
args: [{ selector: 'dd-badge-neobrutal-stamp', standalone: true, template: "<span class=\"dd-badge-neo-stamp\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n <span class=\"dd-badge-neo-stamp__kicker\">{{ kicker() }}</span>\n <span>{{ text() }}</span>\n</span>\n", styles: [":host{display:inline-block}.dd-badge-neo-stamp{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-surface);color:var(--dd-neo-badge-text);box-shadow:4px 4px 0 var(--dd-neo-shadow);font-weight:900;line-height:1;white-space:nowrap;transform:rotate(-2deg)}.dd-badge-neo-stamp[data-size=sm]{padding:5px 8px;font-size:11px}.dd-badge-neo-stamp[data-size=md]{padding:7px 10px;font-size:12px}.dd-badge-neo-stamp__kicker{display:inline-flex;align-items:center;padding:4px 6px;border:2px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-accent);letter-spacing:.12em;text-transform:uppercase}\n"] }]
|
|
544
|
+
args: [{ selector: 'dd-badge-neobrutal-stamp', standalone: true, template: "<span class=\"dd-badge-neo-stamp\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n <span class=\"dd-badge-neo-stamp__kicker\">{{ kicker() }}</span>\n <span>{{ text() }}</span>\n</span>\n", styles: [":host{display:inline-block}.dd-badge-neo-stamp{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-surface);color:var(--dd-neo-badge-text);box-shadow:4px 4px 0 var(--dd-neo-badge-shadow);font-weight:900;line-height:1;white-space:nowrap;transform:rotate(-2deg)}.dd-badge-neo-stamp[data-size=sm]{padding:5px 8px;font-size:11px}.dd-badge-neo-stamp[data-size=md]{padding:7px 10px;font-size:12px}.dd-badge-neo-stamp__kicker{display:inline-flex;align-items:center;padding:4px 6px;border:2px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-accent);color:var(--dd-neo-badge-accent-contrast);letter-spacing:.12em;text-transform:uppercase}\n"] }]
|
|
540
545
|
}], propDecorators: { kicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "kicker", required: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
541
546
|
|
|
542
547
|
class BadgeNeobrutalTicket {
|
|
@@ -6241,7 +6246,7 @@ class BadgeBlock {
|
|
|
6241
6246
|
return el;
|
|
6242
6247
|
}
|
|
6243
6248
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6244
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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 <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code><dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Badge</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code><dd-badge-neobrutal-slab\n [text]=\"'Hot drop'\"\n [color]=\"colorOrange\"\n [size]=\"'md'\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Slab</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Stamp</p>\n <dd-badge-neobrutal-stamp\n [kicker]=\"stampBadgeKicker\"\n [text]=\"stampBadgeText\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Ticket</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorDark\" />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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 .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 .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .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 .examples-block .example-row .example-item dd-badge{width:auto}.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-slab,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-stamp,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-ticket{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: BadgeNeobrutalSlab, selector: "dd-badge-neobrutal-slab", inputs: ["text", "color", "size"] }, { kind: "component", type: BadgeNeobrutalStamp, selector: "dd-badge-neobrutal-stamp", inputs: ["kicker", "text", "color", "size"] }, { kind: "component", type: BadgeNeobrutalTicket, selector: "dd-badge-neobrutal-ticket", inputs: ["text", "color", "size"] }, { kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6249
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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 <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code><dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n </div>\n } @else {\n <h2>{{ 'badgeDoc.neoBadgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.neoUsage' | transloco }}</h3>\n <pre><code><dd-badge-neobrutal-slab\n [text]=\"'Hot drop'\"\n [color]=\"colorOrange\"\n [size]=\"'md'\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.neoSlab' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Violet</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorViolet\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Orange</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Gray</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorGray\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Dark</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorDark\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">White</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorWhite\" />\n </div>\n </div>\n\n <h3>{{ 'badgeDoc.neoStamp' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Violet</p>\n <dd-badge-neobrutal-stamp [kicker]=\"stampBadgeKicker\" [text]=\"stampBadgeText\" [color]=\"colorViolet\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Orange</p>\n <dd-badge-neobrutal-stamp [kicker]=\"stampBadgeKicker\" [text]=\"stampBadgeText\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Gray</p>\n <dd-badge-neobrutal-stamp [kicker]=\"stampBadgeKicker\" [text]=\"stampBadgeText\" [color]=\"colorGray\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Dark</p>\n <dd-badge-neobrutal-stamp [kicker]=\"stampBadgeKicker\" [text]=\"stampBadgeText\" [color]=\"colorDark\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">White</p>\n <dd-badge-neobrutal-stamp [kicker]=\"stampBadgeKicker\" [text]=\"stampBadgeText\" [color]=\"colorWhite\" />\n </div>\n </div>\n\n <h3>{{ 'badgeDoc.neoTicket' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Violet</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorViolet\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Orange</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Gray</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorGray\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Dark</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorDark\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">White</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorWhite\" />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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 .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 .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .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 .examples-block .example-row .example-item dd-badge{width:auto}.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-slab,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-stamp,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-ticket{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: BadgeNeobrutalSlab, selector: "dd-badge-neobrutal-slab", inputs: ["text", "color", "size"] }, { kind: "component", type: BadgeNeobrutalStamp, selector: "dd-badge-neobrutal-stamp", inputs: ["kicker", "text", "color", "size"] }, { kind: "component", type: BadgeNeobrutalTicket, selector: "dd-badge-neobrutal-ticket", inputs: ["text", "color", "size"] }, { kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6245
6250
|
}
|
|
6246
6251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, decorators: [{
|
|
6247
6252
|
type: Component,
|
|
@@ -6255,7 +6260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
6255
6260
|
DdFlexDirectionDirective,
|
|
6256
6261
|
DuckDevCardSection,
|
|
6257
6262
|
DuckDevTab,
|
|
6258
|
-
], template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code><dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Badge</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code><dd-badge-neobrutal-slab\n [text]=\"'Hot drop'\"\n [color]=\"colorOrange\"\n [size]=\"'md'\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Slab</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Stamp</p>\n <dd-badge-neobrutal-stamp\n [kicker]=\"stampBadgeKicker\"\n [text]=\"stampBadgeText\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Ticket</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorDark\" />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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 .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 .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .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 .examples-block .example-row .example-item dd-badge{width:auto}.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-slab,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-stamp,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-ticket{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
6263
|
+
], template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code><dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n </div>\n } @else {\n <h2>{{ 'badgeDoc.neoBadgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.neoUsage' | transloco }}</h3>\n <pre><code><dd-badge-neobrutal-slab\n [text]=\"'Hot drop'\"\n [color]=\"colorOrange\"\n [size]=\"'md'\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.neoSlab' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Violet</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorViolet\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Orange</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Gray</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorGray\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Dark</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorDark\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">White</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorWhite\" />\n </div>\n </div>\n\n <h3>{{ 'badgeDoc.neoStamp' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Violet</p>\n <dd-badge-neobrutal-stamp [kicker]=\"stampBadgeKicker\" [text]=\"stampBadgeText\" [color]=\"colorViolet\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Orange</p>\n <dd-badge-neobrutal-stamp [kicker]=\"stampBadgeKicker\" [text]=\"stampBadgeText\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Gray</p>\n <dd-badge-neobrutal-stamp [kicker]=\"stampBadgeKicker\" [text]=\"stampBadgeText\" [color]=\"colorGray\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Dark</p>\n <dd-badge-neobrutal-stamp [kicker]=\"stampBadgeKicker\" [text]=\"stampBadgeText\" [color]=\"colorDark\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">White</p>\n <dd-badge-neobrutal-stamp [kicker]=\"stampBadgeKicker\" [text]=\"stampBadgeText\" [color]=\"colorWhite\" />\n </div>\n </div>\n\n <h3>{{ 'badgeDoc.neoTicket' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Violet</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorViolet\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Orange</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Gray</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorGray\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Dark</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorDark\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">White</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorWhite\" />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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 .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 .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .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 .examples-block .example-row .example-item dd-badge{width:auto}.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-slab,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-stamp,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-ticket{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
6259
6264
|
}], ctorParameters: () => [] });
|
|
6260
6265
|
|
|
6261
6266
|
class DirectiveBlock {
|
|
@@ -6922,8 +6927,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
6922
6927
|
}] });
|
|
6923
6928
|
|
|
6924
6929
|
const DuckDevLibTranslations = {
|
|
6925
|
-
en: import('./duck-dev-lib-documentation-en-
|
|
6926
|
-
ru: import('./duck-dev-lib-documentation-ru-
|
|
6930
|
+
en: import('./duck-dev-lib-documentation-en-CEWt7DRN.mjs'),
|
|
6931
|
+
ru: import('./duck-dev-lib-documentation-ru-LHt-QMeL.mjs'),
|
|
6927
6932
|
};
|
|
6928
6933
|
|
|
6929
6934
|
/*
|