duck-dev-lib 0.0.95 → 0.0.96
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.
|
@@ -5071,11 +5071,11 @@ class DuckDevProgressNeobrutalSlab {
|
|
|
5071
5071
|
color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
5072
5072
|
percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
|
|
5073
5073
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5074
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressNeobrutalSlab, isStandalone: true, selector: "duck-dev-progress-neobrutal-slab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-slab__header\">\n <div class=\"dd-progress-neo-slab__copy\">\n <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n @if (subtext()) {\n <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n }\n </div>\n <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n </header>\n\n <div class=\"dd-progress-neo-slab__track\">\n <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-
|
|
5074
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressNeobrutalSlab, isStandalone: true, selector: "duck-dev-progress-neobrutal-slab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-slab__header\">\n <div class=\"dd-progress-neo-slab__copy\">\n <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n @if (subtext()) {\n <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n }\n </div>\n <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n </header>\n\n <div class=\"dd-progress-neo-slab__track\">\n <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-neo-paper)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-neo-ink);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-neo-ink);font-size:12px;font-weight:700;opacity:.72}.dd-progress-neo-slab__value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-panel);color:var(--dd-neo-ink);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-progress-panel) 50%,var(--dd-neo-ana-4));overflow:hidden}.dd-progress-neo-slab__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-neo-paper)),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-neo-ana-6);--dd-progress-panel: color-mix(in srgb, var(--dd-neo-ana-6) 14%, var(--dd-neo-paper))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-neo-ana-1);--dd-progress-panel: color-mix(in srgb, var(--dd-neo-ana-3) 32%, var(--dd-neo-paper))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-neo-ana-2);--dd-progress-panel: var(--dd-neo-ana-4)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-neo-ink);--dd-progress-panel: color-mix(in srgb, var(--dd-neo-ink) 12%, var(--dd-neo-paper))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-neo-paper);--dd-progress-panel: var(--dd-neo-ana-4)}\n"] });
|
|
5075
5075
|
}
|
|
5076
5076
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, decorators: [{
|
|
5077
5077
|
type: Component,
|
|
5078
|
-
args: [{ selector: 'duck-dev-progress-neobrutal-slab', standalone: true, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-slab__header\">\n <div class=\"dd-progress-neo-slab__copy\">\n <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n @if (subtext()) {\n <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n }\n </div>\n <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n </header>\n\n <div class=\"dd-progress-neo-slab__track\">\n <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-
|
|
5078
|
+
args: [{ selector: 'duck-dev-progress-neobrutal-slab', standalone: true, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-slab__header\">\n <div class=\"dd-progress-neo-slab__copy\">\n <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n @if (subtext()) {\n <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n }\n </div>\n <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n </header>\n\n <div class=\"dd-progress-neo-slab__track\">\n <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-neo-paper)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-neo-ink);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-neo-ink);font-size:12px;font-weight:700;opacity:.72}.dd-progress-neo-slab__value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-panel);color:var(--dd-neo-ink);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-progress-panel) 50%,var(--dd-neo-ana-4));overflow:hidden}.dd-progress-neo-slab__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-neo-paper)),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-neo-ana-6);--dd-progress-panel: color-mix(in srgb, var(--dd-neo-ana-6) 14%, var(--dd-neo-paper))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-neo-ana-1);--dd-progress-panel: color-mix(in srgb, var(--dd-neo-ana-3) 32%, var(--dd-neo-paper))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-neo-ana-2);--dd-progress-panel: var(--dd-neo-ana-4)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-neo-ink);--dd-progress-panel: color-mix(in srgb, var(--dd-neo-ink) 12%, var(--dd-neo-paper))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-neo-paper);--dd-progress-panel: var(--dd-neo-ana-4)}\n"] }]
|
|
5079
5079
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
5080
5080
|
|
|
5081
5081
|
class DuckDevProgressNeobrutalStamp {
|
|
@@ -5085,11 +5085,11 @@ class DuckDevProgressNeobrutalStamp {
|
|
|
5085
5085
|
color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
5086
5086
|
percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
|
|
5087
5087
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5088
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalStamp, isStandalone: true, selector: "duck-dev-progress-neobrutal-stamp", inputs: { kicker: { classPropertyName: "kicker", publicName: "kicker", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-stamp__header\">\n <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n </header>\n\n <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n <div class=\"dd-progress-neo-stamp__track\">\n <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n <span class=\"dd-progress-neo-stamp__grid\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,var(--dd-
|
|
5088
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalStamp, isStandalone: true, selector: "duck-dev-progress-neobrutal-stamp", inputs: { kicker: { classPropertyName: "kicker", publicName: "kicker", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-stamp__header\">\n <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n </header>\n\n <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n <div class=\"dd-progress-neo-stamp__track\">\n <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n <span class=\"dd-progress-neo-stamp__grid\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,var(--dd-neo-paper)) 0 12%,transparent 13%),var(--dd-neo-paper);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-stamp__header{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-stamp__kicker,.dd-progress-neo-stamp__value{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-fill);color:var(--dd-neo-ink);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-stamp__label{color:var(--dd-neo-ink);font-size:15px;font-weight:900;line-height:1.25;text-transform:uppercase}.dd-progress-neo-stamp__track{position:relative;height:28px;border:4px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-neo-ana-4));overflow:hidden}.dd-progress-neo-stamp__fill{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-neo-paper)),color-mix(in srgb,var(--dd-progress-fill) 78%,var(--dd-neo-ink)));transition:width .18s ease;z-index:1}.dd-progress-neo-stamp__grid{display:none}.dd-progress-neo-stamp[data-color=violet]{--dd-progress-fill: var(--dd-neo-ana-6)}.dd-progress-neo-stamp[data-color=orange]{--dd-progress-fill: var(--dd-neo-ana-1)}.dd-progress-neo-stamp[data-color=gray]{--dd-progress-fill: var(--dd-neo-ana-2)}.dd-progress-neo-stamp[data-color=dark]{--dd-progress-fill: var(--dd-neo-ink)}.dd-progress-neo-stamp[data-color=white]{--dd-progress-fill: var(--dd-neo-paper)}\n"] });
|
|
5089
5089
|
}
|
|
5090
5090
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, decorators: [{
|
|
5091
5091
|
type: Component,
|
|
5092
|
-
args: [{ selector: 'duck-dev-progress-neobrutal-stamp', standalone: true, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-stamp__header\">\n <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n </header>\n\n <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n <div class=\"dd-progress-neo-stamp__track\">\n <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n <span class=\"dd-progress-neo-stamp__grid\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,var(--dd-
|
|
5092
|
+
args: [{ selector: 'duck-dev-progress-neobrutal-stamp', standalone: true, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-stamp__header\">\n <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n </header>\n\n <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n <div class=\"dd-progress-neo-stamp__track\">\n <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n <span class=\"dd-progress-neo-stamp__grid\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,var(--dd-neo-paper)) 0 12%,transparent 13%),var(--dd-neo-paper);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-stamp__header{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-stamp__kicker,.dd-progress-neo-stamp__value{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-fill);color:var(--dd-neo-ink);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-stamp__label{color:var(--dd-neo-ink);font-size:15px;font-weight:900;line-height:1.25;text-transform:uppercase}.dd-progress-neo-stamp__track{position:relative;height:28px;border:4px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-neo-ana-4));overflow:hidden}.dd-progress-neo-stamp__fill{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-neo-paper)),color-mix(in srgb,var(--dd-progress-fill) 78%,var(--dd-neo-ink)));transition:width .18s ease;z-index:1}.dd-progress-neo-stamp__grid{display:none}.dd-progress-neo-stamp[data-color=violet]{--dd-progress-fill: var(--dd-neo-ana-6)}.dd-progress-neo-stamp[data-color=orange]{--dd-progress-fill: var(--dd-neo-ana-1)}.dd-progress-neo-stamp[data-color=gray]{--dd-progress-fill: var(--dd-neo-ana-2)}.dd-progress-neo-stamp[data-color=dark]{--dd-progress-fill: var(--dd-neo-ink)}.dd-progress-neo-stamp[data-color=white]{--dd-progress-fill: var(--dd-neo-paper)}\n"] }]
|
|
5093
5093
|
}], propDecorators: { kicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "kicker", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
5094
5094
|
|
|
5095
5095
|
class DuckDevProgressNeobrutalTicket {
|
|
@@ -5100,11 +5100,11 @@ class DuckDevProgressNeobrutalTicket {
|
|
|
5100
5100
|
color = input(AccentEnumColor.Dark, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
5101
5101
|
percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
|
|
5102
5102
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalTicket, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5103
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalTicket, isStandalone: true, selector: "duck-dev-progress-neobrutal-ticket", inputs: { leftTag: { classPropertyName: "leftTag", publicName: "leftTag", isSignal: true, isRequired: true, transformFunction: null }, rightTag: { classPropertyName: "rightTag", publicName: "rightTag", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-ticket__header\">\n <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n </header>\n\n <div class=\"dd-progress-neo-ticket__body\">\n <div class=\"dd-progress-neo-ticket__copy\">\n <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n </div>\n\n <div class=\"dd-progress-neo-ticket__track\">\n <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-neo-ink)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-neo-paper));color:var(--dd-
|
|
5103
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalTicket, isStandalone: true, selector: "duck-dev-progress-neobrutal-ticket", inputs: { leftTag: { classPropertyName: "leftTag", publicName: "leftTag", isSignal: true, isRequired: true, transformFunction: null }, rightTag: { classPropertyName: "rightTag", publicName: "rightTag", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-ticket__header\">\n <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n </header>\n\n <div class=\"dd-progress-neo-ticket__body\">\n <div class=\"dd-progress-neo-ticket__copy\">\n <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n </div>\n\n <div class=\"dd-progress-neo-ticket__track\">\n <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-neo-ink)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-neo-paper));color:var(--dd-neo-ink);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-neo-ink)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-neo-paper)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-neo-ink);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-neo-ink);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-neo-ink);overflow:hidden;background:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-neo-ana-4))}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,var(--dd-neo-paper)),var(--dd-progress-fill));transition:width .22s ease;box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-neo-ana-6)}.dd-progress-neo-ticket[data-color=orange]{--dd-progress-fill: var(--dd-neo-ana-1)}.dd-progress-neo-ticket[data-color=gray]{--dd-progress-fill: var(--dd-neo-ana-2)}.dd-progress-neo-ticket[data-color=dark]{--dd-progress-fill: var(--dd-neo-ink)}.dd-progress-neo-ticket[data-color=white]{--dd-progress-fill: var(--dd-neo-paper)}\n"] });
|
|
5104
5104
|
}
|
|
5105
5105
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalTicket, decorators: [{
|
|
5106
5106
|
type: Component,
|
|
5107
|
-
args: [{ selector: 'duck-dev-progress-neobrutal-ticket', standalone: true, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-ticket__header\">\n <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n </header>\n\n <div class=\"dd-progress-neo-ticket__body\">\n <div class=\"dd-progress-neo-ticket__copy\">\n <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n </div>\n\n <div class=\"dd-progress-neo-ticket__track\">\n <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-neo-ink)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-neo-paper));color:var(--dd-
|
|
5107
|
+
args: [{ selector: 'duck-dev-progress-neobrutal-ticket', standalone: true, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-ticket__header\">\n <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n </header>\n\n <div class=\"dd-progress-neo-ticket__body\">\n <div class=\"dd-progress-neo-ticket__copy\">\n <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n </div>\n\n <div class=\"dd-progress-neo-ticket__track\">\n <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-neo-ink)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-neo-paper));color:var(--dd-neo-ink);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-neo-ink)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-neo-paper)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-neo-ink);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-neo-ink);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-neo-ink);overflow:hidden;background:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-neo-ana-4))}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,var(--dd-neo-paper)),var(--dd-progress-fill));transition:width .22s ease;box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-neo-ana-6)}.dd-progress-neo-ticket[data-color=orange]{--dd-progress-fill: var(--dd-neo-ana-1)}.dd-progress-neo-ticket[data-color=gray]{--dd-progress-fill: var(--dd-neo-ana-2)}.dd-progress-neo-ticket[data-color=dark]{--dd-progress-fill: var(--dd-neo-ink)}.dd-progress-neo-ticket[data-color=white]{--dd-progress-fill: var(--dd-neo-paper)}\n"] }]
|
|
5108
5108
|
}], propDecorators: { leftTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftTag", required: true }] }], rightTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightTag", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
5109
5109
|
|
|
5110
5110
|
class DuckDevSegmentButton {
|
|
@@ -7042,7 +7042,7 @@ class ProgressBarBlock {
|
|
|
7042
7042
|
this.activeStyleTab.set(tab);
|
|
7043
7043
|
}
|
|
7044
7044
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ProgressBarBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7045
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ProgressBarBlock, isStandalone: true, selector: "app-progress-bar-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'progressDoc.title' | transloco }}</h1>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.line.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.line.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-line\n label=\"Release sync\"\n [value]=\"72\"\n subtext=\"API schema is aligned\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.line.example' | transloco }}</p>\n <duck-dev-progress-line\n label=\"Release sync\"\n [value]=\"lineProgress\"\n subtext=\"API schema is aligned\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.stack.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.stack.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-stack\n label=\"Content migration\"\n [value]=\"56\"\n subtext=\"6 of 10 blocks shipped\"\n [segmentCount]=\"10\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.segmentCount' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.stack.example' | transloco }}</p>\n <duck-dev-progress-stack\n label=\"Content migration\"\n [value]=\"stackProgress\"\n subtext=\"6 of 10 blocks shipped\"\n [segmentCount]=\"10\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.meter.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.meter.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-meter\n label=\"Regression sweep\"\n [value]=\"84\"\n subtext=\"Visual QA is nearly done\"\n [color]=\"colorGray\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.meter.example' | transloco }}</p>\n <duck-dev-progress-meter\n label=\"Regression sweep\"\n [value]=\"meterProgress\"\n subtext=\"Visual QA is nearly done\"\n [color]=\"colorGray\"\n />\n </div>\n </div>\n </div>\n </section>\n } @else {\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.slab.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.slab.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-slab\n label=\"Build queue\"\n [value]=\"68\"\n subtext=\"Artifact pack is cooking\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.slab.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-slab\n label=\"Build queue\"\n [value]=\"slabProgress\"\n subtext=\"Artifact pack is cooking\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.stamp.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.stamp.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-stamp\n kicker=\"Duck Dev\"\n label=\"Verification pass\"\n [value]=\"91\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.kicker' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.stamp.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-stamp\n kicker=\"Duck Dev\"\n label=\"Verification pass\"\n [value]=\"stampProgress\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.ticket.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.ticket.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-ticket\n leftTag=\"phase 02\"\n rightTag=\"ui sync\"\n label=\"Neobrutal rollout\"\n [value]=\"47\"\n [color]=\"colorDark\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.leftTag' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.rightTag' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.ticket.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-ticket\n leftTag=\"phase 02\"\n rightTag=\"ui sync\"\n label=\"Neobrutal rollout\"\n [value]=\"ticketProgress\"\n [color]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n </section>\n }\n </duck-dev-tab>\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 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{margin-bottom:40px}.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{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:16px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .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-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0}@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-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: DuckDevProgressLine, selector: "duck-dev-progress-line", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressStack, selector: "duck-dev-progress-stack", inputs: ["label", "value", "subtext", "color", "segmentCount"] }, { kind: "component", type: DuckDevProgressMeter, selector: "duck-dev-progress-meter", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalSlab, selector: "duck-dev-progress-neobrutal-slab", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalStamp, selector: "duck-dev-progress-neobrutal-stamp", inputs: ["kicker", "label", "value", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalTicket, selector: "duck-dev-progress-neobrutal-ticket", inputs: ["leftTag", "rightTag", "label", "value", "color"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
7045
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ProgressBarBlock, isStandalone: true, selector: "app-progress-bar-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'progressDoc.title' | transloco }}</h1>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.line.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.line.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-line\n label=\"Release sync\"\n [value]=\"72\"\n subtext=\"API schema is aligned\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.line.example' | transloco }}</p>\n <duck-dev-progress-line\n label=\"Release sync\"\n [value]=\"lineProgress\"\n subtext=\"API schema is aligned\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.stack.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.stack.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-stack\n label=\"Content migration\"\n [value]=\"56\"\n subtext=\"6 of 10 blocks shipped\"\n [segmentCount]=\"10\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.segmentCount' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.stack.example' | transloco }}</p>\n <duck-dev-progress-stack\n label=\"Content migration\"\n [value]=\"stackProgress\"\n subtext=\"6 of 10 blocks shipped\"\n [segmentCount]=\"10\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.meter.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.meter.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-meter\n label=\"Regression sweep\"\n [value]=\"84\"\n subtext=\"Visual QA is nearly done\"\n [color]=\"colorGray\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.meter.example' | transloco }}</p>\n <duck-dev-progress-meter\n label=\"Regression sweep\"\n [value]=\"meterProgress\"\n subtext=\"Visual QA is nearly done\"\n [color]=\"colorGray\"\n />\n </div>\n </div>\n </div>\n </section>\n } @else {\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.slab.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.slab.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-slab\n label=\"Build queue\"\n [value]=\"68\"\n subtext=\"Artifact pack is cooking\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.slab.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-slab\n label=\"Build queue\"\n [value]=\"slabProgress\"\n subtext=\"Artifact pack is cooking\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.stamp.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.stamp.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-stamp\n kicker=\"Duck Dev\"\n label=\"Verification pass\"\n [value]=\"91\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.kicker' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.stamp.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-stamp\n kicker=\"Duck Dev\"\n label=\"Verification pass\"\n [value]=\"stampProgress\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.ticket.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.ticket.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-ticket\n leftTag=\"phase 02\"\n rightTag=\"ui sync\"\n label=\"Neobrutal rollout\"\n [value]=\"47\"\n [color]=\"colorDark\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.leftTag' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.rightTag' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.ticket.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-ticket\n leftTag=\"phase 02\"\n rightTag=\"ui sync\"\n label=\"Neobrutal rollout\"\n [value]=\"ticketProgress\"\n [color]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n </section>\n }\n </duck-dev-tab>\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 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{margin-bottom:40px}.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{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:16px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-ana-3) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-neo-paper);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-neo-ana-6)}.demo-container .examples-block .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-neo-ana-1)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0}@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-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: DuckDevProgressLine, selector: "duck-dev-progress-line", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressStack, selector: "duck-dev-progress-stack", inputs: ["label", "value", "subtext", "color", "segmentCount"] }, { kind: "component", type: DuckDevProgressMeter, selector: "duck-dev-progress-meter", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalSlab, selector: "duck-dev-progress-neobrutal-slab", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalStamp, selector: "duck-dev-progress-neobrutal-stamp", inputs: ["kicker", "label", "value", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalTicket, selector: "duck-dev-progress-neobrutal-ticket", inputs: ["leftTag", "rightTag", "label", "value", "color"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
7046
7046
|
}
|
|
7047
7047
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ProgressBarBlock, decorators: [{
|
|
7048
7048
|
type: Component,
|
|
@@ -7055,7 +7055,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
7055
7055
|
DuckDevProgressNeobrutalSlab,
|
|
7056
7056
|
DuckDevProgressNeobrutalStamp,
|
|
7057
7057
|
DuckDevProgressNeobrutalTicket,
|
|
7058
|
-
], template: "<div class=\"demo-container\">\n <h1>{{ 'progressDoc.title' | transloco }}</h1>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.line.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.line.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-line\n label=\"Release sync\"\n [value]=\"72\"\n subtext=\"API schema is aligned\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.line.example' | transloco }}</p>\n <duck-dev-progress-line\n label=\"Release sync\"\n [value]=\"lineProgress\"\n subtext=\"API schema is aligned\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.stack.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.stack.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-stack\n label=\"Content migration\"\n [value]=\"56\"\n subtext=\"6 of 10 blocks shipped\"\n [segmentCount]=\"10\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.segmentCount' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.stack.example' | transloco }}</p>\n <duck-dev-progress-stack\n label=\"Content migration\"\n [value]=\"stackProgress\"\n subtext=\"6 of 10 blocks shipped\"\n [segmentCount]=\"10\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.meter.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.meter.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-meter\n label=\"Regression sweep\"\n [value]=\"84\"\n subtext=\"Visual QA is nearly done\"\n [color]=\"colorGray\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.meter.example' | transloco }}</p>\n <duck-dev-progress-meter\n label=\"Regression sweep\"\n [value]=\"meterProgress\"\n subtext=\"Visual QA is nearly done\"\n [color]=\"colorGray\"\n />\n </div>\n </div>\n </div>\n </section>\n } @else {\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.slab.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.slab.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-slab\n label=\"Build queue\"\n [value]=\"68\"\n subtext=\"Artifact pack is cooking\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.slab.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-slab\n label=\"Build queue\"\n [value]=\"slabProgress\"\n subtext=\"Artifact pack is cooking\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.stamp.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.stamp.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-stamp\n kicker=\"Duck Dev\"\n label=\"Verification pass\"\n [value]=\"91\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.kicker' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.stamp.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-stamp\n kicker=\"Duck Dev\"\n label=\"Verification pass\"\n [value]=\"stampProgress\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.ticket.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.ticket.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-ticket\n leftTag=\"phase 02\"\n rightTag=\"ui sync\"\n label=\"Neobrutal rollout\"\n [value]=\"47\"\n [color]=\"colorDark\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.leftTag' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.rightTag' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.ticket.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-ticket\n leftTag=\"phase 02\"\n rightTag=\"ui sync\"\n label=\"Neobrutal rollout\"\n [value]=\"ticketProgress\"\n [color]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n </section>\n }\n </duck-dev-tab>\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 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{margin-bottom:40px}.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{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:16px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .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-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0}@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-item{min-width:100%}}\n"] }]
|
|
7058
|
+
], template: "<div class=\"demo-container\">\n <h1>{{ 'progressDoc.title' | transloco }}</h1>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.line.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.line.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-line\n label=\"Release sync\"\n [value]=\"72\"\n subtext=\"API schema is aligned\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.line.example' | transloco }}</p>\n <duck-dev-progress-line\n label=\"Release sync\"\n [value]=\"lineProgress\"\n subtext=\"API schema is aligned\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.stack.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.stack.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-stack\n label=\"Content migration\"\n [value]=\"56\"\n subtext=\"6 of 10 blocks shipped\"\n [segmentCount]=\"10\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.segmentCount' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.stack.example' | transloco }}</p>\n <duck-dev-progress-stack\n label=\"Content migration\"\n [value]=\"stackProgress\"\n subtext=\"6 of 10 blocks shipped\"\n [segmentCount]=\"10\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.meter.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.meter.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-meter\n label=\"Regression sweep\"\n [value]=\"84\"\n subtext=\"Visual QA is nearly done\"\n [color]=\"colorGray\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.meter.example' | transloco }}</p>\n <duck-dev-progress-meter\n label=\"Regression sweep\"\n [value]=\"meterProgress\"\n subtext=\"Visual QA is nearly done\"\n [color]=\"colorGray\"\n />\n </div>\n </div>\n </div>\n </section>\n } @else {\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.slab.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.slab.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-slab\n label=\"Build queue\"\n [value]=\"68\"\n subtext=\"Artifact pack is cooking\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.slab.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-slab\n label=\"Build queue\"\n [value]=\"slabProgress\"\n subtext=\"Artifact pack is cooking\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.stamp.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.stamp.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-stamp\n kicker=\"Duck Dev\"\n label=\"Verification pass\"\n [value]=\"91\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.kicker' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.stamp.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-stamp\n kicker=\"Duck Dev\"\n label=\"Verification pass\"\n [value]=\"stampProgress\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.ticket.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.ticket.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-ticket\n leftTag=\"phase 02\"\n rightTag=\"ui sync\"\n label=\"Neobrutal rollout\"\n [value]=\"47\"\n [color]=\"colorDark\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.leftTag' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.rightTag' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.ticket.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-ticket\n leftTag=\"phase 02\"\n rightTag=\"ui sync\"\n label=\"Neobrutal rollout\"\n [value]=\"ticketProgress\"\n [color]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n </section>\n }\n </duck-dev-tab>\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 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{margin-bottom:40px}.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{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:16px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-ana-3) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-neo-paper);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-neo-ana-6)}.demo-container .examples-block .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-neo-ana-1)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0}@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-item{min-width:100%}}\n"] }]
|
|
7059
7059
|
}] });
|
|
7060
7060
|
|
|
7061
7061
|
class SpeakerBubbleBlock {
|