duck-dev-lib 0.0.54 → 0.0.55

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.
@@ -442,7 +442,7 @@ var tabsComponent = {
442
442
  required: "required",
443
443
  optional: "optional",
444
444
  outputs: "Output Events:",
445
- outputTabChange: "fires when switching tabs, returns DuckDevTabItem",
445
+ outputTabChange: "event that fires when switching tabs. Returns the current active tab object (DuckDevTabItem)",
446
446
  features: "Features:",
447
447
  feature1: "Animated transitions between tabs (slide left/right)",
448
448
  feature2: "Animated active tab indicator",
@@ -882,4 +882,4 @@ var en = {
882
882
  };
883
883
 
884
884
  export { accordionDoc, badgeDoc, buttons, cardDoc, en as default, directivesDoc, documentationStyleTabs, inputComponent, loaders, modalDoc, notifications, progressDoc, quickStart, segmentDoc, slider, speakerBubbleDoc, svgComponent, tabs, tabsComponent, tooltipDoc };
885
- //# sourceMappingURL=duck-dev-lib-en-BC4APcVW.mjs.map
885
+ //# sourceMappingURL=duck-dev-lib-en-DX70nkSP.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"duck-dev-lib-en-BC4APcVW.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"duck-dev-lib-en-DX70nkSP.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -4894,11 +4894,11 @@ class DuckDevNotification {
4894
4894
  this.timer = undefined;
4895
4895
  }
4896
4896
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevNotification, deps: [], target: i0.ɵɵFactoryTarget.Component });
4897
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevNotification, isStandalone: true, selector: "duck-dev-notification", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (isVisible()) {\n <div\n [class]=\"'notification notification--' + type() + ' notification--pos-' + position()\"\n animate.enter=\"notification-enter\"\n animate.leave=\"notification-leave\"\n (animationend)=\"handleAnimationEnd($event)\"\n (click)=\"close()\"\n >\n <div class=\"notification__inner\">\n <div class=\"notification__icon\">\n <span>\n @switch (type()) {\n @case ('success') {\n <duck-dev-icon name=\"duck-dev-check\"></duck-dev-icon>\n }\n @case ('warning') {\n <duck-dev-icon name=\"duck-dev-alert-triangle\"></duck-dev-icon>\n }\n @case ('error') {\n <duck-dev-icon name=\"duck-dev-alert-circle\"></duck-dev-icon>\n }\n }\n </span>\n </div>\n <div class=\"notification__content\">\n <h4 class=\"notification__title\">{{ title() }}</h4>\n <p class=\"notification__message\">{{ message() }}</p>\n </div>\n <button\n class=\"notification__close\"\n (click)=\"$event.stopPropagation(); close()\"\n type=\"button\"\n aria-label=\"\u0417\u0430\u043A\u0440\u044B\u0442\u044C\"\n >\n <duck-dev-icon name=\"duck-dev-x-medium\"></duck-dev-icon>\n </button>\n </div>\n </div>\n}\n", styles: [".notification{--dd-notification-shadow-x: 10px;--dd-notification-shadow-y: 10px;--dd-notification-bg: var(--dd-base-0);--dd-notification-accent: var(--dd-base-accent-blue);--dd-notification-text: var(--dd-base-600);--dd-notification-border: var(--dd-base-600);--dd-notification-rest-transform: rotate(-1.2deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(-1.2deg);position:fixed;right:20px;min-width:min(360px,100vw - 32px);max-width:min(420px,100vw - 32px);padding:0;display:block;cursor:pointer;z-index:3;color:var(--dd-notification-text);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-0) 72%,transparent) 0 14%,transparent 14% 100%),var(--dd-notification-bg);border:4px solid var(--dd-notification-border);border-radius:0;box-shadow:var(--dd-notification-shadow-x) var(--dd-notification-shadow-y) 0 var(--dd-notification-border);transform:var(--dd-notification-rest-transform);transform-origin:top right;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s cubic-bezier(.22,1,.36,1)}.notification:hover{transform:var(--dd-notification-hover-transform);box-shadow:14px 14px 0 var(--dd-notification-border)}.notification__inner{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:14px;padding:18px 20px 18px 18px;overflow:hidden;will-change:transform,opacity}.notification__inner:before{content:\"\";position:absolute;inset:10px 10px auto auto;width:72px;height:10px;background:var(--dd-notification-border)}.notification__icon{display:grid;place-items:center;width:54px;height:54px;margin-top:2px;background:var(--dd-notification-accent);border:4px solid var(--dd-notification-border);box-shadow:4px 4px 0 var(--dd-notification-border);font-size:26px;font-weight:900;line-height:1;flex-shrink:0;transform:rotate(-6deg)}.notification__content{display:grid;gap:8px;min-width:0;padding-top:2px}.notification__title{margin:0;padding:4px 10px;display:inline-flex;width:fit-content;max-width:100%;background:var(--dd-notification-border);color:var(--dd-base-0);font-size:15px;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;word-break:break-word}.notification__message{margin:0;max-width:32ch;font-size:15px;line-height:1.35;font-weight:700}.notification__close{display:grid;place-items:center;width:34px;height:34px;margin-top:-4px;padding:0;color:var(--dd-notification-border);background:var(--dd-base-0);border:3px solid var(--dd-notification-border);border-radius:0;box-shadow:3px 3px 0 var(--dd-notification-border);line-height:1;cursor:pointer;flex-shrink:0;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}.notification__close duck-dev-icon{display:inline-flex}.notification__close:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--dd-notification-border)}.notification__close:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--dd-notification-border)}@keyframes dd-notification-content-enter{0%{opacity:0;transform:translate3d(0,10px,0) scale(.965)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes dd-notification-content-leave{0%{opacity:1;transform:translateZ(0) scale(1)}to{opacity:0;transform:translate3d(0,-6px,0) scale(.985)}}@keyframes dd-notification-enter-top{0%{opacity:0;transform:translate3d(0,-18px,0) scale(.94) rotate(-2.2deg)}60%{opacity:1;transform:translate3d(0,2px,0) scale(1.01) rotate(-.8deg)}to{opacity:1;transform:rotate(-1.2deg)}}@keyframes dd-notification-leave-top{0%{opacity:1;transform:rotate(-1.2deg)}to{opacity:0;transform:translate3d(0,-14px,0) scale(.96) rotate(-2.4deg)}}@keyframes dd-notification-enter-bottom{0%{opacity:0;transform:translate3d(0,18px,0) scale(.94) rotate(2deg)}60%{opacity:1;transform:translate3d(0,-2px,0) scale(1.01) rotate(.8deg)}to{opacity:1;transform:rotate(1deg)}}@keyframes dd-notification-leave-bottom{0%{opacity:1;transform:rotate(1deg)}to{opacity:0;transform:translate3d(0,14px,0) scale(.96) rotate(2.2deg)}}@keyframes dd-notification-enter-center{0%{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(.94) rotate(-1.6deg)}65%{opacity:1;transform:translate(-50%,calc(-50% + 2px)) scale(1.01) rotate(-.6deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}}@keyframes dd-notification-leave-center{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}to{opacity:0;transform:translate(-50%,calc(-50% - 10px)) scale(.965) rotate(1deg)}}.notification-enter .notification__inner{animation:dd-notification-content-enter .36s cubic-bezier(.16,1,.3,1) both}.notification-leave .notification__inner{animation:dd-notification-content-leave .22s cubic-bezier(.4,0,1,1) both}.notification--pos-top{top:20px;--dd-notification-rest-transform: rotate(-1.2deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(-1.2deg)}.notification--pos-center{left:50%;top:50%;right:auto;--dd-notification-rest-transform: translate(-50%, -50%) rotate(-1deg);--dd-notification-hover-transform: translate( calc(-50% - 4px) , calc(-50% - 4px) ) rotate(-1deg)}.notification--pos-bottom{bottom:20px;--dd-notification-rest-transform: rotate(1deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(1deg);transform-origin:bottom right}.notification-enter.notification--pos-top{animation:dd-notification-enter-top .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-top{animation:dd-notification-leave-top .24s cubic-bezier(.4,0,1,1) both}.notification-enter.notification--pos-bottom{animation:dd-notification-enter-bottom .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-bottom{animation:dd-notification-leave-bottom .24s cubic-bezier(.4,0,1,1) both}.notification-enter.notification--pos-center{animation:dd-notification-enter-center .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-center{animation:dd-notification-leave-center .24s cubic-bezier(.4,0,1,1) both}.notification--success{--dd-notification-bg: color-mix(in srgb, var(--dd-base-success) 86%, var(--dd-base-0));--dd-notification-accent: var(--dd-base-0)}.notification--warning{--dd-notification-bg: color-mix( in srgb, var(--dd-base-accent-yellow) 82%, var(--dd-base-0) );--dd-notification-accent: var(--dd-base-accent-orange)}.notification--error{--dd-notification-bg: color-mix( in srgb, var(--dd-base-accent-orange) 78%, var(--dd-base-0) );--dd-notification-accent: var(--dd-base-0)}@media(max-width:640px){.notification{left:16px;right:16px;min-width:0;max-width:none;box-shadow:7px 7px 0 var(--dd-notification-border)}.notification:hover{transform:var(--dd-notification-rest-transform);box-shadow:7px 7px 0 var(--dd-notification-border)}.notification__inner{grid-template-columns:auto 1fr;padding:16px}.notification__close{position:absolute;top:12px;right:12px;margin-top:0}.notification__message{max-width:none;padding-right:44px}.notification--pos-center{width:calc(100vw - 32px)}}\n"], dependencies: [{ kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }] });
4897
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevNotification, isStandalone: true, selector: "duck-dev-notification", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (isVisible()) {\n <div\n [class]=\"'notification notification--' + type() + ' notification--pos-' + position()\"\n animate.enter=\"notification-enter\"\n animate.leave=\"notification-leave\"\n (animationend)=\"handleAnimationEnd($event)\"\n (click)=\"close()\"\n >\n <div class=\"notification__inner\">\n <div class=\"notification__icon\">\n <span>\n @switch (type()) {\n @case ('success') {\n <duck-dev-icon name=\"duck-dev-check\"></duck-dev-icon>\n }\n @case ('warning') {\n <duck-dev-icon name=\"duck-dev-alert-triangle\"></duck-dev-icon>\n }\n @case ('error') {\n <duck-dev-icon name=\"duck-dev-alert-circle\"></duck-dev-icon>\n }\n }\n </span>\n </div>\n <div class=\"notification__content\">\n <h4 class=\"notification__title\">{{ title() }}</h4>\n <p class=\"notification__message\">{{ message() }}</p>\n </div>\n <button\n class=\"notification__close\"\n (click)=\"$event.stopPropagation(); close()\"\n type=\"button\"\n aria-label=\"\u0417\u0430\u043A\u0440\u044B\u0442\u044C\"\n >\n <duck-dev-icon name=\"duck-dev-x-medium\"></duck-dev-icon>\n </button>\n </div>\n </div>\n}\n", styles: [".notification{--dd-notification-shadow-x: 10px;--dd-notification-shadow-y: 10px;--dd-notification-bg: var(--dd-base-0);--dd-notification-accent: var(--dd-base-accent-blue);--dd-notification-text: var(--dd-base-600);--dd-notification-border: var(--dd-base-600);--dd-notification-rest-transform: rotate(-1.2deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(-1.2deg);position:fixed;right:20px;min-width:min(360px,100vw - 32px);max-width:min(420px,100vw - 32px);padding:0;display:block;cursor:pointer;z-index:3;color:var(--dd-notification-text);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-0) 72%,transparent) 0 14%,transparent 14% 100%),var(--dd-notification-bg);border:4px solid var(--dd-notification-border);border-radius:0;box-shadow:var(--dd-notification-shadow-x) var(--dd-notification-shadow-y) 0 var(--dd-notification-border);transform:var(--dd-notification-rest-transform);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform-origin:top right;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s cubic-bezier(.22,1,.36,1)}.notification:hover{transform:var(--dd-notification-hover-transform);box-shadow:14px 14px 0 var(--dd-notification-border)}.notification__inner{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:14px;padding:18px 20px 18px 18px;overflow:hidden;will-change:transform,opacity}.notification__inner:before{content:\"\";position:absolute;inset:10px 10px auto auto;width:72px;height:10px;background:var(--dd-notification-border)}.notification__icon{display:grid;place-items:center;width:54px;height:54px;margin-top:2px;background:var(--dd-notification-accent);border:4px solid var(--dd-notification-border);box-shadow:4px 4px 0 var(--dd-notification-border);font-size:26px;font-weight:900;line-height:1;flex-shrink:0;transform:rotate(-6deg)}.notification__content{display:grid;gap:8px;min-width:0;padding-top:2px}.notification__title{margin:0;padding:4px 10px;display:inline-flex;width:fit-content;max-width:100%;background:var(--dd-notification-border);color:var(--dd-base-0);font-size:15px;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;word-break:break-word}.notification__message{margin:0;max-width:32ch;font-size:15px;line-height:1.35;font-weight:700}.notification__close{display:grid;place-items:center;width:34px;height:34px;margin-top:-4px;padding:0;color:var(--dd-notification-border);background:var(--dd-base-0);border:3px solid var(--dd-notification-border);border-radius:0;box-shadow:3px 3px 0 var(--dd-notification-border);line-height:1;cursor:pointer;flex-shrink:0;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}.notification__close duck-dev-icon{display:inline-flex}.notification__close:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--dd-notification-border)}.notification__close:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--dd-notification-border)}@keyframes dd-notification-content-enter{0%{opacity:0;transform:translate3d(0,10px,0) scale(.965)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes dd-notification-content-leave{0%{opacity:1;transform:translateZ(0) scale(1)}to{opacity:0;transform:translate3d(0,-6px,0) scale(.985)}}@keyframes dd-notification-enter-top{0%{opacity:0;transform:translate3d(0,-18px,0) scale(.94) rotate(-2.2deg)}60%{opacity:1;transform:translate3d(0,2px,0) scale(1.01) rotate(-.8deg)}to{opacity:1;transform:rotate(-1.2deg)}}@keyframes dd-notification-leave-top{0%{opacity:1;transform:rotate(-1.2deg)}to{opacity:0;transform:translate3d(0,-14px,0) scale(.96) rotate(-2.4deg)}}@keyframes dd-notification-enter-bottom{0%{opacity:0;transform:translate3d(0,18px,0) scale(.94) rotate(2deg)}60%{opacity:1;transform:translate3d(0,-2px,0) scale(1.01) rotate(.8deg)}to{opacity:1;transform:rotate(1deg)}}@keyframes dd-notification-leave-bottom{0%{opacity:1;transform:rotate(1deg)}to{opacity:0;transform:translate3d(0,14px,0) scale(.96) rotate(2.2deg)}}@keyframes dd-notification-enter-center{0%{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(.94) rotate(-1.6deg)}65%{opacity:1;transform:translate(-50%,calc(-50% + 2px)) scale(1.01) rotate(-.6deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}}@keyframes dd-notification-leave-center{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}to{opacity:0;transform:translate(-50%,calc(-50% - 10px)) scale(.965) rotate(1deg)}}.notification-enter .notification__inner{animation:dd-notification-content-enter .36s cubic-bezier(.16,1,.3,1) both}.notification-leave .notification__inner{animation:dd-notification-content-leave .22s cubic-bezier(.4,0,1,1) both}.notification--pos-top{top:20px;--dd-notification-rest-transform: rotate(-1.2deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(-1.2deg)}.notification--pos-center{left:50%;top:50%;right:auto;--dd-notification-rest-transform: translate(-50%, -50%) rotate(-1deg);--dd-notification-hover-transform: translate( calc(-50% - 4px) , calc(-50% - 4px) ) rotate(-1deg)}.notification--pos-bottom{bottom:20px;--dd-notification-rest-transform: rotate(1deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(1deg);transform-origin:bottom right}.notification-enter.notification--pos-top{animation:dd-notification-enter-top .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-top{animation:dd-notification-leave-top .24s cubic-bezier(.4,0,1,1) both}.notification-enter.notification--pos-bottom{animation:dd-notification-enter-bottom .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-bottom{animation:dd-notification-leave-bottom .24s cubic-bezier(.4,0,1,1) both}.notification-enter.notification--pos-center{animation:dd-notification-enter-center .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-center{animation:dd-notification-leave-center .24s cubic-bezier(.4,0,1,1) both}.notification--success{--dd-notification-bg: color-mix(in srgb, var(--dd-base-success) 86%, var(--dd-base-0));--dd-notification-accent: var(--dd-base-0)}.notification--warning{--dd-notification-bg: color-mix( in srgb, var(--dd-base-accent-yellow) 82%, var(--dd-base-0) );--dd-notification-accent: var(--dd-base-accent-orange)}.notification--error{--dd-notification-bg: color-mix( in srgb, var(--dd-base-accent-orange) 78%, var(--dd-base-0) );--dd-notification-accent: var(--dd-base-0)}@media(max-width:640px){.notification{left:16px;right:16px;min-width:0;max-width:none;box-shadow:7px 7px 0 var(--dd-notification-border)}.notification:hover{transform:var(--dd-notification-rest-transform);box-shadow:7px 7px 0 var(--dd-notification-border)}.notification__inner{grid-template-columns:auto 1fr;padding:16px}.notification__close{position:absolute;top:12px;right:12px;margin-top:0}.notification__message{max-width:none;padding-right:44px}.notification--pos-center{width:calc(100vw - 32px)}}\n"], dependencies: [{ kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }] });
4898
4898
  }
4899
4899
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevNotification, decorators: [{
4900
4900
  type: Component,
4901
- args: [{ selector: 'duck-dev-notification', imports: [DuckDevIcon], template: "@if (isVisible()) {\n <div\n [class]=\"'notification notification--' + type() + ' notification--pos-' + position()\"\n animate.enter=\"notification-enter\"\n animate.leave=\"notification-leave\"\n (animationend)=\"handleAnimationEnd($event)\"\n (click)=\"close()\"\n >\n <div class=\"notification__inner\">\n <div class=\"notification__icon\">\n <span>\n @switch (type()) {\n @case ('success') {\n <duck-dev-icon name=\"duck-dev-check\"></duck-dev-icon>\n }\n @case ('warning') {\n <duck-dev-icon name=\"duck-dev-alert-triangle\"></duck-dev-icon>\n }\n @case ('error') {\n <duck-dev-icon name=\"duck-dev-alert-circle\"></duck-dev-icon>\n }\n }\n </span>\n </div>\n <div class=\"notification__content\">\n <h4 class=\"notification__title\">{{ title() }}</h4>\n <p class=\"notification__message\">{{ message() }}</p>\n </div>\n <button\n class=\"notification__close\"\n (click)=\"$event.stopPropagation(); close()\"\n type=\"button\"\n aria-label=\"\u0417\u0430\u043A\u0440\u044B\u0442\u044C\"\n >\n <duck-dev-icon name=\"duck-dev-x-medium\"></duck-dev-icon>\n </button>\n </div>\n </div>\n}\n", styles: [".notification{--dd-notification-shadow-x: 10px;--dd-notification-shadow-y: 10px;--dd-notification-bg: var(--dd-base-0);--dd-notification-accent: var(--dd-base-accent-blue);--dd-notification-text: var(--dd-base-600);--dd-notification-border: var(--dd-base-600);--dd-notification-rest-transform: rotate(-1.2deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(-1.2deg);position:fixed;right:20px;min-width:min(360px,100vw - 32px);max-width:min(420px,100vw - 32px);padding:0;display:block;cursor:pointer;z-index:3;color:var(--dd-notification-text);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-0) 72%,transparent) 0 14%,transparent 14% 100%),var(--dd-notification-bg);border:4px solid var(--dd-notification-border);border-radius:0;box-shadow:var(--dd-notification-shadow-x) var(--dd-notification-shadow-y) 0 var(--dd-notification-border);transform:var(--dd-notification-rest-transform);transform-origin:top right;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s cubic-bezier(.22,1,.36,1)}.notification:hover{transform:var(--dd-notification-hover-transform);box-shadow:14px 14px 0 var(--dd-notification-border)}.notification__inner{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:14px;padding:18px 20px 18px 18px;overflow:hidden;will-change:transform,opacity}.notification__inner:before{content:\"\";position:absolute;inset:10px 10px auto auto;width:72px;height:10px;background:var(--dd-notification-border)}.notification__icon{display:grid;place-items:center;width:54px;height:54px;margin-top:2px;background:var(--dd-notification-accent);border:4px solid var(--dd-notification-border);box-shadow:4px 4px 0 var(--dd-notification-border);font-size:26px;font-weight:900;line-height:1;flex-shrink:0;transform:rotate(-6deg)}.notification__content{display:grid;gap:8px;min-width:0;padding-top:2px}.notification__title{margin:0;padding:4px 10px;display:inline-flex;width:fit-content;max-width:100%;background:var(--dd-notification-border);color:var(--dd-base-0);font-size:15px;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;word-break:break-word}.notification__message{margin:0;max-width:32ch;font-size:15px;line-height:1.35;font-weight:700}.notification__close{display:grid;place-items:center;width:34px;height:34px;margin-top:-4px;padding:0;color:var(--dd-notification-border);background:var(--dd-base-0);border:3px solid var(--dd-notification-border);border-radius:0;box-shadow:3px 3px 0 var(--dd-notification-border);line-height:1;cursor:pointer;flex-shrink:0;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}.notification__close duck-dev-icon{display:inline-flex}.notification__close:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--dd-notification-border)}.notification__close:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--dd-notification-border)}@keyframes dd-notification-content-enter{0%{opacity:0;transform:translate3d(0,10px,0) scale(.965)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes dd-notification-content-leave{0%{opacity:1;transform:translateZ(0) scale(1)}to{opacity:0;transform:translate3d(0,-6px,0) scale(.985)}}@keyframes dd-notification-enter-top{0%{opacity:0;transform:translate3d(0,-18px,0) scale(.94) rotate(-2.2deg)}60%{opacity:1;transform:translate3d(0,2px,0) scale(1.01) rotate(-.8deg)}to{opacity:1;transform:rotate(-1.2deg)}}@keyframes dd-notification-leave-top{0%{opacity:1;transform:rotate(-1.2deg)}to{opacity:0;transform:translate3d(0,-14px,0) scale(.96) rotate(-2.4deg)}}@keyframes dd-notification-enter-bottom{0%{opacity:0;transform:translate3d(0,18px,0) scale(.94) rotate(2deg)}60%{opacity:1;transform:translate3d(0,-2px,0) scale(1.01) rotate(.8deg)}to{opacity:1;transform:rotate(1deg)}}@keyframes dd-notification-leave-bottom{0%{opacity:1;transform:rotate(1deg)}to{opacity:0;transform:translate3d(0,14px,0) scale(.96) rotate(2.2deg)}}@keyframes dd-notification-enter-center{0%{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(.94) rotate(-1.6deg)}65%{opacity:1;transform:translate(-50%,calc(-50% + 2px)) scale(1.01) rotate(-.6deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}}@keyframes dd-notification-leave-center{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}to{opacity:0;transform:translate(-50%,calc(-50% - 10px)) scale(.965) rotate(1deg)}}.notification-enter .notification__inner{animation:dd-notification-content-enter .36s cubic-bezier(.16,1,.3,1) both}.notification-leave .notification__inner{animation:dd-notification-content-leave .22s cubic-bezier(.4,0,1,1) both}.notification--pos-top{top:20px;--dd-notification-rest-transform: rotate(-1.2deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(-1.2deg)}.notification--pos-center{left:50%;top:50%;right:auto;--dd-notification-rest-transform: translate(-50%, -50%) rotate(-1deg);--dd-notification-hover-transform: translate( calc(-50% - 4px) , calc(-50% - 4px) ) rotate(-1deg)}.notification--pos-bottom{bottom:20px;--dd-notification-rest-transform: rotate(1deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(1deg);transform-origin:bottom right}.notification-enter.notification--pos-top{animation:dd-notification-enter-top .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-top{animation:dd-notification-leave-top .24s cubic-bezier(.4,0,1,1) both}.notification-enter.notification--pos-bottom{animation:dd-notification-enter-bottom .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-bottom{animation:dd-notification-leave-bottom .24s cubic-bezier(.4,0,1,1) both}.notification-enter.notification--pos-center{animation:dd-notification-enter-center .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-center{animation:dd-notification-leave-center .24s cubic-bezier(.4,0,1,1) both}.notification--success{--dd-notification-bg: color-mix(in srgb, var(--dd-base-success) 86%, var(--dd-base-0));--dd-notification-accent: var(--dd-base-0)}.notification--warning{--dd-notification-bg: color-mix( in srgb, var(--dd-base-accent-yellow) 82%, var(--dd-base-0) );--dd-notification-accent: var(--dd-base-accent-orange)}.notification--error{--dd-notification-bg: color-mix( in srgb, var(--dd-base-accent-orange) 78%, var(--dd-base-0) );--dd-notification-accent: var(--dd-base-0)}@media(max-width:640px){.notification{left:16px;right:16px;min-width:0;max-width:none;box-shadow:7px 7px 0 var(--dd-notification-border)}.notification:hover{transform:var(--dd-notification-rest-transform);box-shadow:7px 7px 0 var(--dd-notification-border)}.notification__inner{grid-template-columns:auto 1fr;padding:16px}.notification__close{position:absolute;top:12px;right:12px;margin-top:0}.notification__message{max-width:none;padding-right:44px}.notification--pos-center{width:calc(100vw - 32px)}}\n"] }]
4901
+ args: [{ selector: 'duck-dev-notification', imports: [DuckDevIcon], template: "@if (isVisible()) {\n <div\n [class]=\"'notification notification--' + type() + ' notification--pos-' + position()\"\n animate.enter=\"notification-enter\"\n animate.leave=\"notification-leave\"\n (animationend)=\"handleAnimationEnd($event)\"\n (click)=\"close()\"\n >\n <div class=\"notification__inner\">\n <div class=\"notification__icon\">\n <span>\n @switch (type()) {\n @case ('success') {\n <duck-dev-icon name=\"duck-dev-check\"></duck-dev-icon>\n }\n @case ('warning') {\n <duck-dev-icon name=\"duck-dev-alert-triangle\"></duck-dev-icon>\n }\n @case ('error') {\n <duck-dev-icon name=\"duck-dev-alert-circle\"></duck-dev-icon>\n }\n }\n </span>\n </div>\n <div class=\"notification__content\">\n <h4 class=\"notification__title\">{{ title() }}</h4>\n <p class=\"notification__message\">{{ message() }}</p>\n </div>\n <button\n class=\"notification__close\"\n (click)=\"$event.stopPropagation(); close()\"\n type=\"button\"\n aria-label=\"\u0417\u0430\u043A\u0440\u044B\u0442\u044C\"\n >\n <duck-dev-icon name=\"duck-dev-x-medium\"></duck-dev-icon>\n </button>\n </div>\n </div>\n}\n", styles: [".notification{--dd-notification-shadow-x: 10px;--dd-notification-shadow-y: 10px;--dd-notification-bg: var(--dd-base-0);--dd-notification-accent: var(--dd-base-accent-blue);--dd-notification-text: var(--dd-base-600);--dd-notification-border: var(--dd-base-600);--dd-notification-rest-transform: rotate(-1.2deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(-1.2deg);position:fixed;right:20px;min-width:min(360px,100vw - 32px);max-width:min(420px,100vw - 32px);padding:0;display:block;cursor:pointer;z-index:3;color:var(--dd-notification-text);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-0) 72%,transparent) 0 14%,transparent 14% 100%),var(--dd-notification-bg);border:4px solid var(--dd-notification-border);border-radius:0;box-shadow:var(--dd-notification-shadow-x) var(--dd-notification-shadow-y) 0 var(--dd-notification-border);transform:var(--dd-notification-rest-transform);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform-origin:top right;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s cubic-bezier(.22,1,.36,1)}.notification:hover{transform:var(--dd-notification-hover-transform);box-shadow:14px 14px 0 var(--dd-notification-border)}.notification__inner{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:14px;padding:18px 20px 18px 18px;overflow:hidden;will-change:transform,opacity}.notification__inner:before{content:\"\";position:absolute;inset:10px 10px auto auto;width:72px;height:10px;background:var(--dd-notification-border)}.notification__icon{display:grid;place-items:center;width:54px;height:54px;margin-top:2px;background:var(--dd-notification-accent);border:4px solid var(--dd-notification-border);box-shadow:4px 4px 0 var(--dd-notification-border);font-size:26px;font-weight:900;line-height:1;flex-shrink:0;transform:rotate(-6deg)}.notification__content{display:grid;gap:8px;min-width:0;padding-top:2px}.notification__title{margin:0;padding:4px 10px;display:inline-flex;width:fit-content;max-width:100%;background:var(--dd-notification-border);color:var(--dd-base-0);font-size:15px;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;word-break:break-word}.notification__message{margin:0;max-width:32ch;font-size:15px;line-height:1.35;font-weight:700}.notification__close{display:grid;place-items:center;width:34px;height:34px;margin-top:-4px;padding:0;color:var(--dd-notification-border);background:var(--dd-base-0);border:3px solid var(--dd-notification-border);border-radius:0;box-shadow:3px 3px 0 var(--dd-notification-border);line-height:1;cursor:pointer;flex-shrink:0;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}.notification__close duck-dev-icon{display:inline-flex}.notification__close:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--dd-notification-border)}.notification__close:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--dd-notification-border)}@keyframes dd-notification-content-enter{0%{opacity:0;transform:translate3d(0,10px,0) scale(.965)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes dd-notification-content-leave{0%{opacity:1;transform:translateZ(0) scale(1)}to{opacity:0;transform:translate3d(0,-6px,0) scale(.985)}}@keyframes dd-notification-enter-top{0%{opacity:0;transform:translate3d(0,-18px,0) scale(.94) rotate(-2.2deg)}60%{opacity:1;transform:translate3d(0,2px,0) scale(1.01) rotate(-.8deg)}to{opacity:1;transform:rotate(-1.2deg)}}@keyframes dd-notification-leave-top{0%{opacity:1;transform:rotate(-1.2deg)}to{opacity:0;transform:translate3d(0,-14px,0) scale(.96) rotate(-2.4deg)}}@keyframes dd-notification-enter-bottom{0%{opacity:0;transform:translate3d(0,18px,0) scale(.94) rotate(2deg)}60%{opacity:1;transform:translate3d(0,-2px,0) scale(1.01) rotate(.8deg)}to{opacity:1;transform:rotate(1deg)}}@keyframes dd-notification-leave-bottom{0%{opacity:1;transform:rotate(1deg)}to{opacity:0;transform:translate3d(0,14px,0) scale(.96) rotate(2.2deg)}}@keyframes dd-notification-enter-center{0%{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(.94) rotate(-1.6deg)}65%{opacity:1;transform:translate(-50%,calc(-50% + 2px)) scale(1.01) rotate(-.6deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}}@keyframes dd-notification-leave-center{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}to{opacity:0;transform:translate(-50%,calc(-50% - 10px)) scale(.965) rotate(1deg)}}.notification-enter .notification__inner{animation:dd-notification-content-enter .36s cubic-bezier(.16,1,.3,1) both}.notification-leave .notification__inner{animation:dd-notification-content-leave .22s cubic-bezier(.4,0,1,1) both}.notification--pos-top{top:20px;--dd-notification-rest-transform: rotate(-1.2deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(-1.2deg)}.notification--pos-center{left:50%;top:50%;right:auto;--dd-notification-rest-transform: translate(-50%, -50%) rotate(-1deg);--dd-notification-hover-transform: translate( calc(-50% - 4px) , calc(-50% - 4px) ) rotate(-1deg)}.notification--pos-bottom{bottom:20px;--dd-notification-rest-transform: rotate(1deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(1deg);transform-origin:bottom right}.notification-enter.notification--pos-top{animation:dd-notification-enter-top .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-top{animation:dd-notification-leave-top .24s cubic-bezier(.4,0,1,1) both}.notification-enter.notification--pos-bottom{animation:dd-notification-enter-bottom .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-bottom{animation:dd-notification-leave-bottom .24s cubic-bezier(.4,0,1,1) both}.notification-enter.notification--pos-center{animation:dd-notification-enter-center .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-center{animation:dd-notification-leave-center .24s cubic-bezier(.4,0,1,1) both}.notification--success{--dd-notification-bg: color-mix(in srgb, var(--dd-base-success) 86%, var(--dd-base-0));--dd-notification-accent: var(--dd-base-0)}.notification--warning{--dd-notification-bg: color-mix( in srgb, var(--dd-base-accent-yellow) 82%, var(--dd-base-0) );--dd-notification-accent: var(--dd-base-accent-orange)}.notification--error{--dd-notification-bg: color-mix( in srgb, var(--dd-base-accent-orange) 78%, var(--dd-base-0) );--dd-notification-accent: var(--dd-base-0)}@media(max-width:640px){.notification{left:16px;right:16px;min-width:0;max-width:none;box-shadow:7px 7px 0 var(--dd-notification-border)}.notification:hover{transform:var(--dd-notification-rest-transform);box-shadow:7px 7px 0 var(--dd-notification-border)}.notification__inner{grid-template-columns:auto 1fr;padding:16px}.notification__close{position:absolute;top:12px;right:12px;margin-top:0}.notification__message{max-width:none;padding-right:44px}.notification--pos-center{width:calc(100vw - 32px)}}\n"] }]
4902
4902
  }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
4903
4903
 
4904
4904
  class DuckDevNotificationContainer {
@@ -5604,11 +5604,11 @@ class DuckDevProgressNeobrutalSlab {
5604
5604
  color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
5605
5605
  percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
5606
5606
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
5607
- 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-base-0)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-neo-ink)}.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-base-600);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-base-600);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-base-0);color:var(--dd-base-600);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);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-base-0)),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-base-secondary);--dd-progress-panel: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-base-400);--dd-progress-panel: var(--dd-base-100)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-base-600);--dd-progress-panel: color-mix(in srgb, var(--dd-base-600) 12%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-base-0);--dd-progress-panel: var(--dd-base-100)}\n"] });
5607
+ 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-base-0)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-neo-ink)}.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-base-600);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-base-600);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-base-0);color:var(--dd-base-600);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);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-base-0)),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-base-secondary);--dd-progress-panel: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-yellow) 32%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-base-400);--dd-progress-panel: var(--dd-base-100)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-base-600);--dd-progress-panel: color-mix(in srgb, var(--dd-base-600) 12%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-base-0);--dd-progress-panel: var(--dd-base-100)}\n"] });
5608
5608
  }
5609
5609
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, decorators: [{
5610
5610
  type: Component,
5611
- 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-base-0)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-neo-ink)}.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-base-600);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-base-600);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-base-0);color:var(--dd-base-600);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);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-base-0)),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-base-secondary);--dd-progress-panel: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-base-400);--dd-progress-panel: var(--dd-base-100)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-base-600);--dd-progress-panel: color-mix(in srgb, var(--dd-base-600) 12%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-base-0);--dd-progress-panel: var(--dd-base-100)}\n"] }]
5611
+ 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-base-0)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-neo-ink)}.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-base-600);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-base-600);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-base-0);color:var(--dd-base-600);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);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-base-0)),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-base-secondary);--dd-progress-panel: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-yellow) 32%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-base-400);--dd-progress-panel: var(--dd-base-100)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-base-600);--dd-progress-panel: color-mix(in srgb, var(--dd-base-600) 12%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-base-0);--dd-progress-panel: var(--dd-base-100)}\n"] }]
5612
5612
  }], 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 }] }] } });
5613
5613
 
5614
5614
  class DuckDevProgressNeobrutalStamp {
@@ -5906,11 +5906,11 @@ class DuckDevSegmentNeobrutal {
5906
5906
  }
5907
5907
  }
5908
5908
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
5909
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSegmentNeobrutal, isStandalone: true, selector: "duck-dev-segment-neobrutal", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", ionChange: "ionChange" }, queries: [{ propertyName: "segmentButtons", predicate: DuckDevSegmentButton }], viewQueries: [{ propertyName: "buttonsContainer", first: true, predicate: ["buttonsContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"dd-segment-neo\" [ngStyle]=\"segmentStyle()\">\n <div class=\"dd-segment-neo__indicator-shell\">\n <div\n class=\"dd-segment-neo__indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n >\n <span class=\"dd-segment-neo__indicator-notch\"></span>\n </div>\n </div>\n\n <div class=\"dd-segment-neo__buttons\" #buttonsContainer>\n @for (button of buttons; track button.value; let i = $index) {\n <button\n class=\"dd-segment-neo__button\"\n [class.dd-segment-neo__button--checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <span class=\"dd-segment-neo__button-copy\">\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </span>\n </button>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.dd-segment-neo{--dd-segment-neo-surface: var(--dd-base-0);--dd-segment-neo-panel: var(--dd-base-100);--dd-segment-neo-accent: var(--dd-base-accent-blue);--dd-segment-neo-shadow: var(--dd-base-accent-orange);--dd-segment-neo-text: var(--dd-base-600);--dd-segment-neo-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;width:100%;padding:10px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 24%,transparent) 0 12%,transparent 12% 100%),var(--dd-segment-neo-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-shadow);overflow:clip}.dd-segment-neo:before,.dd-segment-neo:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-neo-ink);z-index:0}.dd-segment-neo:before{top:-7px;right:18px;transform:rotate(10deg)}.dd-segment-neo:after{left:20px;bottom:-9px;transform:rotate(-9deg)}.dd-segment-neo__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo__indicator{position:absolute;top:0;bottom:0;left:0;border:3px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 36%,transparent) 0 18%,transparent 18% 100%),var(--dd-segment-neo-panel);box-shadow:4px 4px 0 var(--dd-neo-ink);transition:transform .26s cubic-bezier(.22,1,.36,1),width .26s cubic-bezier(.22,1,.36,1)}.dd-segment-neo__indicator-notch{position:absolute;top:-3px;right:14px;width:16px;height:16px;border-left:3px solid var(--dd-neo-ink);border-bottom:3px solid var(--dd-neo-ink);background:var(--dd-segment-neo-accent)}.dd-segment-neo__buttons{position:relative;z-index:2;display:flex;width:100%;gap:6px}.dd-segment-neo__button{position:relative;display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:64px;padding:14px 18px 12px;border:0;background:transparent;color:var(--dd-segment-neo-muted);cursor:pointer;text-align:center;font:inherit;transition:transform .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent}.dd-segment-neo__button:hover{transform:translateY(-1px)}.dd-segment-neo__button:focus-visible{outline:3px solid var(--dd-segment-neo-accent);outline-offset:-3px}.dd-segment-neo__button-copy{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:.78rem;font-weight:1000;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;text-wrap:balance}.dd-segment-neo__button--checked{color:var(--dd-segment-neo-text)}@media(max-width:640px){.dd-segment-neo{padding:8px;box-shadow:6px 6px 0 var(--dd-segment-neo-shadow)}.dd-segment-neo__indicator-shell{inset:8px}.dd-segment-neo__buttons{gap:2px}.dd-segment-neo__button{min-height:56px;padding-inline:12px}.dd-segment-neo__button-copy{font-size:.72rem;letter-spacing:.11em}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
5909
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSegmentNeobrutal, isStandalone: true, selector: "duck-dev-segment-neobrutal", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", ionChange: "ionChange" }, queries: [{ propertyName: "segmentButtons", predicate: DuckDevSegmentButton }], viewQueries: [{ propertyName: "buttonsContainer", first: true, predicate: ["buttonsContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"dd-segment-neo\" [ngStyle]=\"segmentStyle()\">\n <div class=\"dd-segment-neo__indicator-shell\">\n <div\n class=\"dd-segment-neo__indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n >\n <span class=\"dd-segment-neo__indicator-notch\"></span>\n </div>\n </div>\n\n <div class=\"dd-segment-neo__buttons\" #buttonsContainer>\n @for (button of buttons; track button.value; let i = $index) {\n <button\n class=\"dd-segment-neo__button\"\n [class.dd-segment-neo__button--checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <span class=\"dd-segment-neo__button-copy\">\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </span>\n </button>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.dd-segment-neo{--dd-segment-neo-surface: var(--dd-base-0);--dd-segment-neo-panel: var(--dd-base-100);--dd-segment-neo-accent: var(--dd-base-accent-blue);--dd-segment-neo-shadow: var(--dd-base-accent-orange);--dd-segment-neo-text: var(--dd-base-600);--dd-segment-neo-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;width:100%;padding:10px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 24%,transparent) 0 12%,transparent 12% 100%),var(--dd-segment-neo-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-shadow);overflow:clip}.dd-segment-neo:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-neo-ink);z-index:0;left:20px;bottom:-9px;transform:rotate(-9deg)}.dd-segment-neo__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo__indicator{position:absolute;top:0;bottom:0;left:0;border:3px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 36%,transparent) 0 18%,transparent 18% 100%),var(--dd-segment-neo-panel);box-shadow:4px 4px 0 var(--dd-neo-ink);transition:transform .26s cubic-bezier(.22,1,.36,1),width .26s cubic-bezier(.22,1,.36,1)}.dd-segment-neo__indicator-notch{position:absolute;top:-3px;right:14px;width:16px;height:16px;border-left:3px solid var(--dd-neo-ink);border-bottom:3px solid var(--dd-neo-ink);background:var(--dd-segment-neo-accent)}.dd-segment-neo__buttons{position:relative;z-index:2;display:flex;width:100%;gap:6px}.dd-segment-neo__button{position:relative;display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:64px;padding:14px 18px 12px;border:0;background:transparent;color:var(--dd-segment-neo-muted);cursor:pointer;text-align:center;font:inherit;transition:transform .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent}.dd-segment-neo__button:hover{transform:translateY(-1px)}.dd-segment-neo__button:focus-visible{outline:3px solid var(--dd-segment-neo-accent);outline-offset:-3px}.dd-segment-neo__button-copy{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:.78rem;font-weight:1000;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;text-wrap:balance}.dd-segment-neo__button--checked{color:var(--dd-segment-neo-text)}@media(max-width:640px){.dd-segment-neo{padding:8px;box-shadow:6px 6px 0 var(--dd-segment-neo-shadow)}.dd-segment-neo__indicator-shell{inset:8px}.dd-segment-neo__buttons{gap:2px}.dd-segment-neo__button{min-height:56px;padding-inline:12px}.dd-segment-neo__button-copy{font-size:.72rem;letter-spacing:.11em}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
5910
5910
  }
5911
5911
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentNeobrutal, decorators: [{
5912
5912
  type: Component,
5913
- args: [{ selector: 'duck-dev-segment-neobrutal', imports: [NgTemplateOutlet, NgStyle], template: "<div class=\"dd-segment-neo\" [ngStyle]=\"segmentStyle()\">\n <div class=\"dd-segment-neo__indicator-shell\">\n <div\n class=\"dd-segment-neo__indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n >\n <span class=\"dd-segment-neo__indicator-notch\"></span>\n </div>\n </div>\n\n <div class=\"dd-segment-neo__buttons\" #buttonsContainer>\n @for (button of buttons; track button.value; let i = $index) {\n <button\n class=\"dd-segment-neo__button\"\n [class.dd-segment-neo__button--checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <span class=\"dd-segment-neo__button-copy\">\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </span>\n </button>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.dd-segment-neo{--dd-segment-neo-surface: var(--dd-base-0);--dd-segment-neo-panel: var(--dd-base-100);--dd-segment-neo-accent: var(--dd-base-accent-blue);--dd-segment-neo-shadow: var(--dd-base-accent-orange);--dd-segment-neo-text: var(--dd-base-600);--dd-segment-neo-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;width:100%;padding:10px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 24%,transparent) 0 12%,transparent 12% 100%),var(--dd-segment-neo-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-shadow);overflow:clip}.dd-segment-neo:before,.dd-segment-neo:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-neo-ink);z-index:0}.dd-segment-neo:before{top:-7px;right:18px;transform:rotate(10deg)}.dd-segment-neo:after{left:20px;bottom:-9px;transform:rotate(-9deg)}.dd-segment-neo__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo__indicator{position:absolute;top:0;bottom:0;left:0;border:3px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 36%,transparent) 0 18%,transparent 18% 100%),var(--dd-segment-neo-panel);box-shadow:4px 4px 0 var(--dd-neo-ink);transition:transform .26s cubic-bezier(.22,1,.36,1),width .26s cubic-bezier(.22,1,.36,1)}.dd-segment-neo__indicator-notch{position:absolute;top:-3px;right:14px;width:16px;height:16px;border-left:3px solid var(--dd-neo-ink);border-bottom:3px solid var(--dd-neo-ink);background:var(--dd-segment-neo-accent)}.dd-segment-neo__buttons{position:relative;z-index:2;display:flex;width:100%;gap:6px}.dd-segment-neo__button{position:relative;display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:64px;padding:14px 18px 12px;border:0;background:transparent;color:var(--dd-segment-neo-muted);cursor:pointer;text-align:center;font:inherit;transition:transform .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent}.dd-segment-neo__button:hover{transform:translateY(-1px)}.dd-segment-neo__button:focus-visible{outline:3px solid var(--dd-segment-neo-accent);outline-offset:-3px}.dd-segment-neo__button-copy{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:.78rem;font-weight:1000;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;text-wrap:balance}.dd-segment-neo__button--checked{color:var(--dd-segment-neo-text)}@media(max-width:640px){.dd-segment-neo{padding:8px;box-shadow:6px 6px 0 var(--dd-segment-neo-shadow)}.dd-segment-neo__indicator-shell{inset:8px}.dd-segment-neo__buttons{gap:2px}.dd-segment-neo__button{min-height:56px;padding-inline:12px}.dd-segment-neo__button-copy{font-size:.72rem;letter-spacing:.11em}}\n"] }]
5913
+ args: [{ selector: 'duck-dev-segment-neobrutal', imports: [NgTemplateOutlet, NgStyle], template: "<div class=\"dd-segment-neo\" [ngStyle]=\"segmentStyle()\">\n <div class=\"dd-segment-neo__indicator-shell\">\n <div\n class=\"dd-segment-neo__indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n >\n <span class=\"dd-segment-neo__indicator-notch\"></span>\n </div>\n </div>\n\n <div class=\"dd-segment-neo__buttons\" #buttonsContainer>\n @for (button of buttons; track button.value; let i = $index) {\n <button\n class=\"dd-segment-neo__button\"\n [class.dd-segment-neo__button--checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <span class=\"dd-segment-neo__button-copy\">\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </span>\n </button>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.dd-segment-neo{--dd-segment-neo-surface: var(--dd-base-0);--dd-segment-neo-panel: var(--dd-base-100);--dd-segment-neo-accent: var(--dd-base-accent-blue);--dd-segment-neo-shadow: var(--dd-base-accent-orange);--dd-segment-neo-text: var(--dd-base-600);--dd-segment-neo-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;width:100%;padding:10px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 24%,transparent) 0 12%,transparent 12% 100%),var(--dd-segment-neo-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-shadow);overflow:clip}.dd-segment-neo:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-neo-ink);z-index:0;left:20px;bottom:-9px;transform:rotate(-9deg)}.dd-segment-neo__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo__indicator{position:absolute;top:0;bottom:0;left:0;border:3px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 36%,transparent) 0 18%,transparent 18% 100%),var(--dd-segment-neo-panel);box-shadow:4px 4px 0 var(--dd-neo-ink);transition:transform .26s cubic-bezier(.22,1,.36,1),width .26s cubic-bezier(.22,1,.36,1)}.dd-segment-neo__indicator-notch{position:absolute;top:-3px;right:14px;width:16px;height:16px;border-left:3px solid var(--dd-neo-ink);border-bottom:3px solid var(--dd-neo-ink);background:var(--dd-segment-neo-accent)}.dd-segment-neo__buttons{position:relative;z-index:2;display:flex;width:100%;gap:6px}.dd-segment-neo__button{position:relative;display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:64px;padding:14px 18px 12px;border:0;background:transparent;color:var(--dd-segment-neo-muted);cursor:pointer;text-align:center;font:inherit;transition:transform .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent}.dd-segment-neo__button:hover{transform:translateY(-1px)}.dd-segment-neo__button:focus-visible{outline:3px solid var(--dd-segment-neo-accent);outline-offset:-3px}.dd-segment-neo__button-copy{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:.78rem;font-weight:1000;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;text-wrap:balance}.dd-segment-neo__button--checked{color:var(--dd-segment-neo-text)}@media(max-width:640px){.dd-segment-neo{padding:8px;box-shadow:6px 6px 0 var(--dd-segment-neo-shadow)}.dd-segment-neo__indicator-shell{inset:8px}.dd-segment-neo__buttons{gap:2px}.dd-segment-neo__button{min-height:56px;padding-inline:12px}.dd-segment-neo__button-copy{font-size:.72rem;letter-spacing:.11em}}\n"] }]
5914
5914
  }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], ionChange: [{ type: i0.Output, args: ["ionChange"] }], segmentButtons: [{
5915
5915
  type: ContentChildren,
5916
5916
  args: [DuckDevSegmentButton]
@@ -6074,7 +6074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
6074
6074
  }] });
6075
6075
 
6076
6076
  const DuckDevLibTranslations = {
6077
- en: import('./duck-dev-lib-en-BC4APcVW.mjs'),
6077
+ en: import('./duck-dev-lib-en-DX70nkSP.mjs'),
6078
6078
  ru: import('./duck-dev-lib-ru-BiVnCmCN.mjs'),
6079
6079
  };
6080
6080