duck-dev-lib 0.0.27 → 0.0.28

package/fesm2022/{duck-dev-lib-en-AryRCkw5.mjs → duck-dev-lib-en-mOVobVPA.mjs}

@@ -8,6 +8,7 @@ var tabs = {
 	input: "Input",
 	notifications: "Notifications",
 	badge: "Badges",
+	slider: "Slider",
 	directives: "Directives"
 };
 var notifications = {
@@ -443,4 +444,4 @@ var en = {
 };
 
 export { accordionDoc, badgeDoc, buttons, cardDoc, en as default, directivesDoc, inputComponent, loaders, notifications, slider, svgComponent, tabs, tabsComponent };
-//# sourceMappingURL=duck-dev-lib-en-AryRCkw5.mjs.map
+//# sourceMappingURL=duck-dev-lib-en-mOVobVPA.mjs.map

package/fesm2022/{duck-dev-lib-en-AryRCkw5.mjs.map → duck-dev-lib-en-mOVobVPA.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"duck-dev-lib-en-AryRCkw5.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"duck-dev-lib-en-mOVobVPA.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/fesm2022/{duck-dev-lib-ru-D_msyug7.mjs → duck-dev-lib-ru-Vu8xDdcB.mjs}

@@ -8,6 +8,7 @@ var tabs = {
 	input: "Вввод",
 	notifications: "Уведомления",
 	badge: "Бейджи",
+	slider: "Слайдер",
 	directives: "Директивы"
 };
 var notifications = {
@@ -443,4 +444,4 @@ var ru = {
 };
 
 export { accordionDoc, badgeDoc, buttons, cardDoc, ru as default, directivesDoc, inputComponent, loaders, notifications, slider, svgComponent, tabs, tabsComponent };
-//# sourceMappingURL=duck-dev-lib-ru-D_msyug7.mjs.map
+//# sourceMappingURL=duck-dev-lib-ru-Vu8xDdcB.mjs.map

package/fesm2022/{duck-dev-lib-ru-D_msyug7.mjs.map → duck-dev-lib-ru-Vu8xDdcB.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"duck-dev-lib-ru-D_msyug7.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"duck-dev-lib-ru-Vu8xDdcB.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/fesm2022/duck-dev-lib.mjs

@@ -2533,11 +2533,11 @@ class SliderBlock {
         this.slides.set([...this.slideTemplates()]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.1", type: SliderBlock, isStandalone: true, selector: "app-slider-block", viewQueries: [{ propertyName: "slideTemplates", predicate: ["slide"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'slider.title' | transloco }}</h1>\n\n  <section class=\"component-section\">\n    <h2>{{ 'slider.raindrops.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'slider.raindrops.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'slider.raindrops.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-slider-flip\n  [items]=\"slides()\"\n  [intervalMs]=\"3000\"\n  [autoplay]=\"true\"\n  [color]=\"'White'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'slider.raindrops.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>items</strong> ({{ 'slider.required' | transloco }}) -\n          {{ 'slider.raindrops.inputItems' | transloco }}\n        </li>\n        <li><strong>intervalMs</strong> - {{ 'slider.raindrops.inputInterval' | transloco }}</li>\n        <li><strong>autoplay</strong> - {{ 'slider.raindrops.inputAutoplay' | transloco }}</li>\n        <li>\n          <strong>color</strong> - {{ 'slider.colorDescription' | transloco }}\n        </li>\n      </ul>\n    </div>\n\n    <!-- Meaningful demo slides -->\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-hero\" aria-label=\"Overview\">\n        <h3 class=\"dd-doc-slide__title\">{{ 'slider.demo.heroTitle' | transloco }}</h3>\n        <p class=\"dd-doc-slide__subtitle\">\n          {{ 'slider.demo.heroSubtitle' | transloco }}\n        </p>\n        <a class=\"dd-doc-slide__cta\" href=\"#components\" aria-label=\"{{ 'slider.demo.heroCta' | transloco }}\"\n          >{{ 'slider.demo.heroCta' | transloco }}</a\n        >\n      </section>\n    </ng-template>\n\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-features\" aria-label=\"Highlights\">\n        <ul class=\"dd-doc-feature-list\" role=\"list\">\n          <li class=\"dd-doc-feature\">\n            <h4>{{ 'slider.demo.features.accessibleTitle' | transloco }}</h4>\n            <p>{{ 'slider.demo.features.accessibleDesc' | transloco }}</p>\n          </li>\n          <li class=\"dd-doc-feature\">\n            <h4>{{ 'slider.demo.features.themeableTitle' | transloco }}</h4>\n            <p>{{ 'slider.demo.features.themeableDesc' | transloco }}</p>\n          </li>\n          <li class=\"dd-doc-feature\">\n            <h4>{{ 'slider.demo.features.lightweightTitle' | transloco }}</h4>\n            <p>{{ 'slider.demo.features.lightweightDesc' | transloco }}</p>\n          </li>\n        </ul>\n      </section>\n    </ng-template>\n\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-code\" aria-label=\"Usage example\">\n        <h4 class=\"dd-doc-slide-code__title\">{{ 'slider.demo.code.quickStartTitle' | transloco }}</h4>\n        <pre class=\"dd-doc-code\"><code>&lt;dd-slider-flip\n  [items]=\"slides()\"\n  [intervalMs]=\"3000\"\n  [autoplay]=\"true\"&gt;\n&lt;/dd-slider-flip&gt;</code></pre>\n        <p class=\"dd-doc-note\">{{ 'slider.demo.code.tip' | transloco }}</p>\n      </section>\n    </ng-template>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'slider.raindrops.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'slider.raindrops.exampleBasic' | transloco }}</p>\n          <dd-slider-flip [items]=\"slides()\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'slider.classic.exampleBasic' | transloco }}</p>\n          <dd-slider-classic [items]=\"slides()\" />\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"component-section\">\n    <h2>{{ 'slider.classic.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'slider.classic.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'slider.classic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-slider-classic\n  [items]=\"slides()\"\n  [intervalMs]=\"3000\"\n  [autoplay]=\"true\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'slider.classic.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>items</strong> ({{ 'slider.required' | transloco }}) -\n          {{ 'slider.classic.inputItems' | transloco }}\n        </li>\n        <li><strong>intervalMs</strong> - {{ 'slider.classic.inputInterval' | transloco }}</li>\n        <li><strong>autoplay</strong> - {{ 'slider.classic.inputAutoplay' | transloco }}</li>\n        <li>\n          <strong>color</strong> - {{ 'slider.colorDescription' | transloco }}\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'slider.classic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'slider.classic.exampleBasic' | transloco }}</p>\n          <dd-slider-classic [items]=\"slides()\" />\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100)}.demo-container .component-section .examples-block .example-row .example-item dd-slider-flip,.demo-container .component-section .examples-block .example-row .example-item dd-slider-classic{display:block;width:100%;height:240px}.demo-container .component-section .examples-block .example-row .example-item :host ::ng-deep dd-slider-flip .container,.demo-container .component-section .examples-block .example-row .example-item :host ::ng-deep dd-slider-classic .container{height:100%}.demo-container .component-section .examples-block .example-row .example-item{border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}.dd-doc-slide{width:100%;box-sizing:border-box;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.dd-doc-slide-hero{background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid var(--dd-base-200);border-radius:12px}.dd-doc-slide__title{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.dd-doc-slide__subtitle{font-size:16px;color:var(--dd-base-400);margin:0}.dd-doc-slide__cta{display:inline-block;margin-top:8px;padding:10px 16px;border-radius:8px;background:var(--dd-base-accent-blue);color:var(--dd-base-0);text-decoration:none;font-weight:600;box-shadow:0 2px 8px var(--dd-base-300)}.dd-doc-slide__cta:hover{background:var(--dd-base-500)}.dd-doc-slide-features{background:var(--dd-base-0)}.dd-doc-feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.dd-doc-feature{background:var(--dd-base-100);border:1px solid var(--dd-base-200);border-radius:10px;padding:14px}.dd-doc-feature h4{margin:0 0 6px;font-size:16px;color:var(--dd-base-500)}.dd-doc-feature p{margin:0;font-size:14px;color:var(--dd-base-400)}.dd-doc-slide-code{align-items:stretch}.dd-doc-slide-code__title{margin:0 0 8px;font-size:18px;color:var(--dd-base-500)}.dd-doc-code{background:var(--dd-base-600);color:var(--dd-base-100);border-radius:8px;padding:12px;overflow:auto;text-align:left}.dd-doc-note{margin:8px 0 0;font-size:13px;color:var(--dd-base-400)}@media(max-width:768px){.dd-doc-feature-list{grid-template-columns:1fr}.dd-doc-slide__title{font-size:20px}.dd-doc-slide__subtitle{font-size:14px}}\n"], dependencies: [{ kind: "component", type: SliderFlip, selector: "dd-slider-flip", inputs: ["items", "intervalMs", "autoplay", "color"] }, { kind: "component", type: SliderClassic, selector: "dd-slider-classic", inputs: ["items", "intervalMs", "autoplay", "color"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.1", type: SliderBlock, isStandalone: true, selector: "app-slider-block", viewQueries: [{ propertyName: "slideTemplates", predicate: ["slide"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'slider.title' | transloco }}</h1>\n\n  <section class=\"component-section\">\n    <h2>{{ 'slider.raindrops.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'slider.raindrops.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'slider.raindrops.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-slider-flip\n  [items]=\"slides()\"\n  [intervalMs]=\"3000\"\n  [autoplay]=\"true\"\n  [color]=\"'White'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'slider.raindrops.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>items</strong> ({{ 'slider.required' | transloco }}) -\n          {{ 'slider.raindrops.inputItems' | transloco }}\n        </li>\n        <li><strong>intervalMs</strong> - {{ 'slider.raindrops.inputInterval' | transloco }}</li>\n        <li><strong>autoplay</strong> - {{ 'slider.raindrops.inputAutoplay' | transloco }}</li>\n        <li>\n          <strong>color</strong> - {{ 'slider.colorDescription' | transloco }}\n        </li>\n      </ul>\n    </div>\n\n    <!-- Meaningful demo slides -->\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-hero\" aria-label=\"Overview\">\n        <h3 class=\"dd-doc-slide__title\">{{ 'slider.demo.heroTitle' | transloco }}</h3>\n        <p class=\"dd-doc-slide__subtitle\">\n          {{ 'slider.demo.heroSubtitle' | transloco }}\n        </p>\n        <a class=\"dd-doc-slide__cta\" href=\"#components\" aria-label=\"{{ 'slider.demo.heroCta' | transloco }}\"\n          >{{ 'slider.demo.heroCta' | transloco }}</a\n        >\n      </section>\n    </ng-template>\n\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-features\" aria-label=\"Highlights\">\n        <ul class=\"dd-doc-feature-list\" role=\"list\">\n          <li class=\"dd-doc-feature\">\n            <h4>{{ 'slider.demo.features.accessibleTitle' | transloco }}</h4>\n            <p>{{ 'slider.demo.features.accessibleDesc' | transloco }}</p>\n          </li>\n          <li class=\"dd-doc-feature\">\n            <h4>{{ 'slider.demo.features.themeableTitle' | transloco }}</h4>\n            <p>{{ 'slider.demo.features.themeableDesc' | transloco }}</p>\n          </li>\n          <li class=\"dd-doc-feature\">\n            <h4>{{ 'slider.demo.features.lightweightTitle' | transloco }}</h4>\n            <p>{{ 'slider.demo.features.lightweightDesc' | transloco }}</p>\n          </li>\n        </ul>\n      </section>\n    </ng-template>\n\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-code\" aria-label=\"Usage example\">\n        <h4 class=\"dd-doc-slide-code__title\">{{ 'slider.demo.code.quickStartTitle' | transloco }}</h4>\n        <pre class=\"dd-doc-code\"><code>&lt;dd-slider-flip\n  [items]=\"slides()\"\n  [intervalMs]=\"3000\"\n  [autoplay]=\"true\"&gt;\n&lt;/dd-slider-flip&gt;</code></pre>\n        <p class=\"dd-doc-note\">{{ 'slider.demo.code.tip' | transloco }}</p>\n      </section>\n    </ng-template>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'slider.raindrops.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'slider.raindrops.exampleBasic' | transloco }}</p>\n          <dd-slider-flip [items]=\"slides()\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'slider.classic.exampleBasic' | transloco }}</p>\n          <dd-slider-classic [items]=\"slides()\" />\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"component-section\">\n    <h2>{{ 'slider.classic.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'slider.classic.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'slider.classic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-slider-classic\n  [items]=\"slides()\"\n  [intervalMs]=\"3000\"\n  [autoplay]=\"true\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'slider.classic.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>items</strong> ({{ 'slider.required' | transloco }}) -\n          {{ 'slider.classic.inputItems' | transloco }}\n        </li>\n        <li><strong>intervalMs</strong> - {{ 'slider.classic.inputInterval' | transloco }}</li>\n        <li><strong>autoplay</strong> - {{ 'slider.classic.inputAutoplay' | transloco }}</li>\n        <li>\n          <strong>color</strong> - {{ 'slider.colorDescription' | transloco }}\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'slider.classic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'slider.classic.exampleBasic' | transloco }}</p>\n          <dd-slider-classic [items]=\"slides()\" />\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100)}.demo-container .component-section .examples-block .example-row .example-item dd-slider-flip,.demo-container .component-section .examples-block .example-row .example-item dd-slider-classic{display:block;width:100%;aspect-ratio:16/9;max-height:min(60vh,420px)}.demo-container .component-section .examples-block .example-row .example-item :host ::ng-deep dd-slider-flip .container,.demo-container .component-section .examples-block .example-row .example-item :host ::ng-deep dd-slider-classic .container{height:100%}.demo-container .component-section .examples-block .example-row .example-item{border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}.dd-doc-slide{width:100%;box-sizing:border-box;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.dd-doc-slide-hero{background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid var(--dd-base-200);border-radius:12px}.dd-doc-slide__title{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.dd-doc-slide__subtitle{font-size:16px;color:var(--dd-base-400);margin:0}.dd-doc-slide__cta{display:inline-block;margin-top:8px;padding:10px 16px;border-radius:8px;background:var(--dd-base-accent-blue);color:var(--dd-base-0);text-decoration:none;font-weight:600;box-shadow:0 2px 8px var(--dd-base-300)}.dd-doc-slide__cta:hover{background:var(--dd-base-500)}.dd-doc-slide-features{background:var(--dd-base-0)}.dd-doc-feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.dd-doc-feature{background:var(--dd-base-100);border:1px solid var(--dd-base-200);border-radius:10px;padding:14px}.dd-doc-feature h4{margin:0 0 6px;font-size:16px;color:var(--dd-base-500)}.dd-doc-feature p{margin:0;font-size:14px;color:var(--dd-base-400)}.dd-doc-slide-code{align-items:stretch}.dd-doc-slide-code__title{margin:0 0 8px;font-size:18px;color:var(--dd-base-500)}.dd-doc-code{background:var(--dd-base-600);color:var(--dd-base-100);border-radius:8px;padding:12px;overflow:auto;text-align:left}.dd-doc-note{margin:8px 0 0;font-size:13px;color:var(--dd-base-400)}@media(max-width:768px){.dd-doc-feature-list{grid-template-columns:1fr}.dd-doc-slide__title{font-size:20px}.dd-doc-slide__subtitle{font-size:14px}}\n"], dependencies: [{ kind: "component", type: SliderFlip, selector: "dd-slider-flip", inputs: ["items", "intervalMs", "autoplay", "color"] }, { kind: "component", type: SliderClassic, selector: "dd-slider-classic", inputs: ["items", "intervalMs", "autoplay", "color"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderBlock, decorators: [{
             type: Component,
-            args: [{ selector: 'app-slider-block', standalone: true, imports: [TranslocoPipe, SliderFlip, SliderClassic], template: "<div class=\"demo-container\">\n  <h1>{{ 'slider.title' | transloco }}</h1>\n\n  <section class=\"component-section\">\n    <h2>{{ 'slider.raindrops.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'slider.raindrops.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'slider.raindrops.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-slider-flip\n  [items]=\"slides()\"\n  [intervalMs]=\"3000\"\n  [autoplay]=\"true\"\n  [color]=\"'White'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'slider.raindrops.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>items</strong> ({{ 'slider.required' | transloco }}) -\n          {{ 'slider.raindrops.inputItems' | transloco }}\n        </li>\n        <li><strong>intervalMs</strong> - {{ 'slider.raindrops.inputInterval' | transloco }}</li>\n        <li><strong>autoplay</strong> - {{ 'slider.raindrops.inputAutoplay' | transloco }}</li>\n        <li>\n          <strong>color</strong> - {{ 'slider.colorDescription' | transloco }}\n        </li>\n      </ul>\n    </div>\n\n    <!-- Meaningful demo slides -->\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-hero\" aria-label=\"Overview\">\n        <h3 class=\"dd-doc-slide__title\">{{ 'slider.demo.heroTitle' | transloco }}</h3>\n        <p class=\"dd-doc-slide__subtitle\">\n          {{ 'slider.demo.heroSubtitle' | transloco }}\n        </p>\n        <a class=\"dd-doc-slide__cta\" href=\"#components\" aria-label=\"{{ 'slider.demo.heroCta' | transloco }}\"\n          >{{ 'slider.demo.heroCta' | transloco }}</a\n        >\n      </section>\n    </ng-template>\n\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-features\" aria-label=\"Highlights\">\n        <ul class=\"dd-doc-feature-list\" role=\"list\">\n          <li class=\"dd-doc-feature\">\n            <h4>{{ 'slider.demo.features.accessibleTitle' | transloco }}</h4>\n            <p>{{ 'slider.demo.features.accessibleDesc' | transloco }}</p>\n          </li>\n          <li class=\"dd-doc-feature\">\n            <h4>{{ 'slider.demo.features.themeableTitle' | transloco }}</h4>\n            <p>{{ 'slider.demo.features.themeableDesc' | transloco }}</p>\n          </li>\n          <li class=\"dd-doc-feature\">\n            <h4>{{ 'slider.demo.features.lightweightTitle' | transloco }}</h4>\n            <p>{{ 'slider.demo.features.lightweightDesc' | transloco }}</p>\n          </li>\n        </ul>\n      </section>\n    </ng-template>\n\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-code\" aria-label=\"Usage example\">\n        <h4 class=\"dd-doc-slide-code__title\">{{ 'slider.demo.code.quickStartTitle' | transloco }}</h4>\n        <pre class=\"dd-doc-code\"><code>&lt;dd-slider-flip\n  [items]=\"slides()\"\n  [intervalMs]=\"3000\"\n  [autoplay]=\"true\"&gt;\n&lt;/dd-slider-flip&gt;</code></pre>\n        <p class=\"dd-doc-note\">{{ 'slider.demo.code.tip' | transloco }}</p>\n      </section>\n    </ng-template>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'slider.raindrops.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'slider.raindrops.exampleBasic' | transloco }}</p>\n          <dd-slider-flip [items]=\"slides()\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'slider.classic.exampleBasic' | transloco }}</p>\n          <dd-slider-classic [items]=\"slides()\" />\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"component-section\">\n    <h2>{{ 'slider.classic.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'slider.classic.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'slider.classic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-slider-classic\n  [items]=\"slides()\"\n  [intervalMs]=\"3000\"\n  [autoplay]=\"true\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'slider.classic.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>items</strong> ({{ 'slider.required' | transloco }}) -\n          {{ 'slider.classic.inputItems' | transloco }}\n        </li>\n        <li><strong>intervalMs</strong> - {{ 'slider.classic.inputInterval' | transloco }}</li>\n        <li><strong>autoplay</strong> - {{ 'slider.classic.inputAutoplay' | transloco }}</li>\n        <li>\n          <strong>color</strong> - {{ 'slider.colorDescription' | transloco }}\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'slider.classic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'slider.classic.exampleBasic' | transloco }}</p>\n          <dd-slider-classic [items]=\"slides()\" />\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100)}.demo-container .component-section .examples-block .example-row .example-item dd-slider-flip,.demo-container .component-section .examples-block .example-row .example-item dd-slider-classic{display:block;width:100%;height:240px}.demo-container .component-section .examples-block .example-row .example-item :host ::ng-deep dd-slider-flip .container,.demo-container .component-section .examples-block .example-row .example-item :host ::ng-deep dd-slider-classic .container{height:100%}.demo-container .component-section .examples-block .example-row .example-item{border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}.dd-doc-slide{width:100%;box-sizing:border-box;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.dd-doc-slide-hero{background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid var(--dd-base-200);border-radius:12px}.dd-doc-slide__title{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.dd-doc-slide__subtitle{font-size:16px;color:var(--dd-base-400);margin:0}.dd-doc-slide__cta{display:inline-block;margin-top:8px;padding:10px 16px;border-radius:8px;background:var(--dd-base-accent-blue);color:var(--dd-base-0);text-decoration:none;font-weight:600;box-shadow:0 2px 8px var(--dd-base-300)}.dd-doc-slide__cta:hover{background:var(--dd-base-500)}.dd-doc-slide-features{background:var(--dd-base-0)}.dd-doc-feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.dd-doc-feature{background:var(--dd-base-100);border:1px solid var(--dd-base-200);border-radius:10px;padding:14px}.dd-doc-feature h4{margin:0 0 6px;font-size:16px;color:var(--dd-base-500)}.dd-doc-feature p{margin:0;font-size:14px;color:var(--dd-base-400)}.dd-doc-slide-code{align-items:stretch}.dd-doc-slide-code__title{margin:0 0 8px;font-size:18px;color:var(--dd-base-500)}.dd-doc-code{background:var(--dd-base-600);color:var(--dd-base-100);border-radius:8px;padding:12px;overflow:auto;text-align:left}.dd-doc-note{margin:8px 0 0;font-size:13px;color:var(--dd-base-400)}@media(max-width:768px){.dd-doc-feature-list{grid-template-columns:1fr}.dd-doc-slide__title{font-size:20px}.dd-doc-slide__subtitle{font-size:14px}}\n"] }]
+            args: [{ selector: 'app-slider-block', standalone: true, imports: [TranslocoPipe, SliderFlip, SliderClassic], template: "<div class=\"demo-container\">\n  <h1>{{ 'slider.title' | transloco }}</h1>\n\n  <section class=\"component-section\">\n    <h2>{{ 'slider.raindrops.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'slider.raindrops.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'slider.raindrops.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-slider-flip\n  [items]=\"slides()\"\n  [intervalMs]=\"3000\"\n  [autoplay]=\"true\"\n  [color]=\"'White'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'slider.raindrops.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>items</strong> ({{ 'slider.required' | transloco }}) -\n          {{ 'slider.raindrops.inputItems' | transloco }}\n        </li>\n        <li><strong>intervalMs</strong> - {{ 'slider.raindrops.inputInterval' | transloco }}</li>\n        <li><strong>autoplay</strong> - {{ 'slider.raindrops.inputAutoplay' | transloco }}</li>\n        <li>\n          <strong>color</strong> - {{ 'slider.colorDescription' | transloco }}\n        </li>\n      </ul>\n    </div>\n\n    <!-- Meaningful demo slides -->\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-hero\" aria-label=\"Overview\">\n        <h3 class=\"dd-doc-slide__title\">{{ 'slider.demo.heroTitle' | transloco }}</h3>\n        <p class=\"dd-doc-slide__subtitle\">\n          {{ 'slider.demo.heroSubtitle' | transloco }}\n        </p>\n        <a class=\"dd-doc-slide__cta\" href=\"#components\" aria-label=\"{{ 'slider.demo.heroCta' | transloco }}\"\n          >{{ 'slider.demo.heroCta' | transloco }}</a\n        >\n      </section>\n    </ng-template>\n\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-features\" aria-label=\"Highlights\">\n        <ul class=\"dd-doc-feature-list\" role=\"list\">\n          <li class=\"dd-doc-feature\">\n            <h4>{{ 'slider.demo.features.accessibleTitle' | transloco }}</h4>\n            <p>{{ 'slider.demo.features.accessibleDesc' | transloco }}</p>\n          </li>\n          <li class=\"dd-doc-feature\">\n            <h4>{{ 'slider.demo.features.themeableTitle' | transloco }}</h4>\n            <p>{{ 'slider.demo.features.themeableDesc' | transloco }}</p>\n          </li>\n          <li class=\"dd-doc-feature\">\n            <h4>{{ 'slider.demo.features.lightweightTitle' | transloco }}</h4>\n            <p>{{ 'slider.demo.features.lightweightDesc' | transloco }}</p>\n          </li>\n        </ul>\n      </section>\n    </ng-template>\n\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-code\" aria-label=\"Usage example\">\n        <h4 class=\"dd-doc-slide-code__title\">{{ 'slider.demo.code.quickStartTitle' | transloco }}</h4>\n        <pre class=\"dd-doc-code\"><code>&lt;dd-slider-flip\n  [items]=\"slides()\"\n  [intervalMs]=\"3000\"\n  [autoplay]=\"true\"&gt;\n&lt;/dd-slider-flip&gt;</code></pre>\n        <p class=\"dd-doc-note\">{{ 'slider.demo.code.tip' | transloco }}</p>\n      </section>\n    </ng-template>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'slider.raindrops.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'slider.raindrops.exampleBasic' | transloco }}</p>\n          <dd-slider-flip [items]=\"slides()\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'slider.classic.exampleBasic' | transloco }}</p>\n          <dd-slider-classic [items]=\"slides()\" />\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"component-section\">\n    <h2>{{ 'slider.classic.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'slider.classic.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'slider.classic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-slider-classic\n  [items]=\"slides()\"\n  [intervalMs]=\"3000\"\n  [autoplay]=\"true\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'slider.classic.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>items</strong> ({{ 'slider.required' | transloco }}) -\n          {{ 'slider.classic.inputItems' | transloco }}\n        </li>\n        <li><strong>intervalMs</strong> - {{ 'slider.classic.inputInterval' | transloco }}</li>\n        <li><strong>autoplay</strong> - {{ 'slider.classic.inputAutoplay' | transloco }}</li>\n        <li>\n          <strong>color</strong> - {{ 'slider.colorDescription' | transloco }}\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'slider.classic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'slider.classic.exampleBasic' | transloco }}</p>\n          <dd-slider-classic [items]=\"slides()\" />\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100)}.demo-container .component-section .examples-block .example-row .example-item dd-slider-flip,.demo-container .component-section .examples-block .example-row .example-item dd-slider-classic{display:block;width:100%;aspect-ratio:16/9;max-height:min(60vh,420px)}.demo-container .component-section .examples-block .example-row .example-item :host ::ng-deep dd-slider-flip .container,.demo-container .component-section .examples-block .example-row .example-item :host ::ng-deep dd-slider-classic .container{height:100%}.demo-container .component-section .examples-block .example-row .example-item{border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}.dd-doc-slide{width:100%;box-sizing:border-box;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.dd-doc-slide-hero{background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid var(--dd-base-200);border-radius:12px}.dd-doc-slide__title{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.dd-doc-slide__subtitle{font-size:16px;color:var(--dd-base-400);margin:0}.dd-doc-slide__cta{display:inline-block;margin-top:8px;padding:10px 16px;border-radius:8px;background:var(--dd-base-accent-blue);color:var(--dd-base-0);text-decoration:none;font-weight:600;box-shadow:0 2px 8px var(--dd-base-300)}.dd-doc-slide__cta:hover{background:var(--dd-base-500)}.dd-doc-slide-features{background:var(--dd-base-0)}.dd-doc-feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.dd-doc-feature{background:var(--dd-base-100);border:1px solid var(--dd-base-200);border-radius:10px;padding:14px}.dd-doc-feature h4{margin:0 0 6px;font-size:16px;color:var(--dd-base-500)}.dd-doc-feature p{margin:0;font-size:14px;color:var(--dd-base-400)}.dd-doc-slide-code{align-items:stretch}.dd-doc-slide-code__title{margin:0 0 8px;font-size:18px;color:var(--dd-base-500)}.dd-doc-code{background:var(--dd-base-600);color:var(--dd-base-100);border-radius:8px;padding:12px;overflow:auto;text-align:left}.dd-doc-note{margin:8px 0 0;font-size:13px;color:var(--dd-base-400)}@media(max-width:768px){.dd-doc-feature-list{grid-template-columns:1fr}.dd-doc-slide__title{font-size:20px}.dd-doc-slide__subtitle{font-size:14px}}\n"] }]
         }], propDecorators: { slideTemplates: [{ type: i0.ViewChildren, args: ['slide', { isSignal: true }] }] } });
 
 class CardBlock {
@@ -2621,8 +2621,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }] });
 
 const DuckDevLibTranslations = {
-    en: import('./duck-dev-lib-en-AryRCkw5.mjs'),
-    ru: import('./duck-dev-lib-ru-D_msyug7.mjs'),
+    en: import('./duck-dev-lib-en-mOVobVPA.mjs'),
+    ru: import('./duck-dev-lib-ru-Vu8xDdcB.mjs'),
 };
 
 /*