duck-dev-lib 0.0.19 → 0.0.20

package/fesm2022/duck-dev-lib.mjs

@@ -2,9 +2,9 @@ import * as i0 from '@angular/core';
 import { input, computed, Component, output, signal, viewChildren, effect, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TranslocoPipe, TranslocoService } from '@jsverse/transloco';
-import * as i1 from '@angular/platform-browser';
-import * as i1$1 from '@angular/forms';
+import * as i1 from '@angular/forms';
 import { ReactiveFormsModule } from '@angular/forms';
+import * as i1$1 from '@angular/platform-browser';
 
 var ButtonEnumColor;
 (function (ButtonEnumColor) {
@@ -175,6 +175,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
             args: [{ selector: 'duck-dev-button-glide-over', standalone: true, imports: [], template: "<button\n  type=\"button\"\n  class=\"rounded-button rounded-button--glide-over\"\n  [style]=\"buttonStyle()\"\n>\n<span class=\"button-glide-over__container\">\n            <span class=\"button-glide-over__icon is-first\">\n                <svg\n                  class=\"button-glide-over__icon-item\"\n                  style=\"--index: 3\"\n                  viewBox=\"0 0 256 256\"\n                >\n                    <path\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      stroke-width=\"24\"\n                      d=\"M40 128h176M144 56l72 72-72 72\"\n                    />\n                </svg>\n            </span>\n\n            <span class=\"button-glide-over__text\">{{ textButton() }}</span>\n\n            <span class=\"button-glide-over__icon is-last\">\n                <svg\n                  class=\"button-glide-over__icon-item\"\n                  style=\"--index: 0\"\n                  viewBox=\"0 0 256 256\"\n                >\n                    <path\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      stroke-width=\"20\"\n                      d=\"M40 128h176M144 56l72 72-72 72\"\n                    />\n                </svg>\n            </span>\n        </span>\n\n<span class=\"button-glide-over__background\"></span>\n</button>\n", styles: ["@charset \"UTF-8\";: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-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-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)}:root{--elastic-ease: linear( 0, .2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, .941 24.01%, .8912 25.91%, .8694 27.84%, .8698 29.21%, .8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, .9961 53.26%, .9839 57.54%, .9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, .9981 86.66%, 1 100% );--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--transform-ease: cubic-bezier(.32, .72, 0, 1);--opacity-ease: ease-out}.rounded-button{font-style:normal;font-family:Inter,sans-serif;font-size:18px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;min-width:64px;width:100%;text-wrap:nowrap;background-color:var(--btn-bg-color);color:var(--btn-text-color);padding:var(--btn-padding);border:1px solid var(--btn-border-color);border-radius:69px;cursor:pointer;transition:all .2s ease-in-out,background-color .6s ease-in-out}.rounded-button:hover{background-color:var(--btn-hover-color);box-shadow:0 2px 6px var(--dd-base-300)}.rounded-button:active{background-color:var(--btn-active-color);transform:scale(.98)}.rounded-button:focus{outline:none}.rounded-button:disabled{background-color:var(--nx-base-200)!important;color:var(--nx-base-400)!important;cursor:not-allowed;box-shadow:none!important}.rounded-button:disabled:hover,.rounded-button:disabled:active,.rounded-button:disabled:focus{background-color:var(--nx-base-200)!important;transform:none!important}.rounded-button--blur-lift{position:relative;overflow:hidden;padding:0}.rounded-button--blur-lift:hover{box-shadow:none;background-color:var(--btn-bg-color)}.rounded-button--blur-lift:active{transform:none;background-color:var(--btn-bg-color)}.rounded-button--glide-over{display:grid;place-content:center;position:relative;overflow:hidden;padding:0;background:transparent;border:none;cursor:pointer}.rounded-button--glide-over:hover,.rounded-button--glide-over:active{background:transparent;box-shadow:none}.button-blur-lift__screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.button-blur-lift__container{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);z-index:1;width:100%;height:100%}.button-blur-lift__text{display:flex;position:relative}.button-blur-lift__letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__letter{display:inline-block;transform-origin:center center -.5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__letter[style*=\"--index: 0\"]{position:relative;filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.button-blur-lift__letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.button-blur-lift__hover-text{display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}.button-blur-lift__hover-letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__hover-letter{display:inline-block;transform-origin:center center .5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__hover-letter[style*=\"--index: 0\"]{position:relative;filter:blur(4px);opacity:0;transform:rotateX(180deg)}.button-blur-lift__hover-letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(90deg)}.button-blur-lift__hover-letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(0px);opacity:0;transform:rotateX(0)}.button-blur-lift__background{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--btn-bg-color);transition:background-color .3s ease;border-radius:inherit;z-index:0}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(4px);opacity:0;transform:rotateX(180deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(90deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 2\"]{filter:blur(0px);opacity:0;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 2\"]{filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.rounded-button--blur-lift:hover .button-blur-lift__background{background-color:var(--btn-hover-color)}.rounded-button--blur-lift:not(:has(.button-blur-lift__hover-text)):hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__hover-letter{transition-delay:0s}.button-blur-lift__letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__hover-letter{transition-delay:.03s}.button-blur-lift__letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__hover-letter{transition-delay:.06s}.button-blur-lift__letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__hover-letter{transition-delay:.09s}.button-blur-lift__letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__hover-letter{transition-delay:.12s}.button-blur-lift__letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__hover-letter{transition-delay:.15s}.button-blur-lift__letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__hover-letter{transition-delay:.18s}.button-blur-lift__letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__hover-letter{transition-delay:.21s}.button-blur-lift__letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__hover-letter{transition-delay:.24s}.button-blur-lift__letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__hover-letter{transition-delay:.27s}.button-blur-lift__letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__hover-letter{transition-delay:.3s}.button-blur-lift__letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__hover-letter{transition-delay:.33s}.button-blur-lift__letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__hover-letter{transition-delay:.36s}.button-blur-lift__letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__hover-letter{transition-delay:.39s}.button-blur-lift__letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__hover-letter{transition-delay:.42s}.button-blur-lift__letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__hover-letter{transition-delay:.45s}.button-blur-lift__letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__hover-letter{transition-delay:.48s}.button-blur-lift__letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__hover-letter{transition-delay:.51s}.button-blur-lift__letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__hover-letter{transition-delay:.54s}.button-blur-lift__letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__hover-letter{transition-delay:.57s}.button-blur-lift__letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__hover-letter{transition-delay:.6s}.button-blur-lift__letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__hover-letter{transition-delay:.63s}.button-blur-lift__letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__hover-letter{transition-delay:.66s}.button-blur-lift__letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__hover-letter{transition-delay:.69s}.button-blur-lift__letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__hover-letter{transition-delay:.72s}.button-blur-lift__letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__hover-letter{transition-delay:.75s}.button-blur-lift__letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__hover-letter{transition-delay:.78s}.button-blur-lift__letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__hover-letter{transition-delay:.81s}.button-blur-lift__letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__hover-letter{transition-delay:.84s}.button-blur-lift__letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__hover-letter{transition-delay:.87s}.button-blur-lift__letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__hover-letter{transition-delay:.9s}.rounded-button--blur-lift:active .button-blur-lift__background{background-color:var(--btn-active-color)}.rounded-button--glide-over{display:inline-grid;place-content:center;position:relative;overflow:hidden;border:none;background:transparent;cursor:pointer;border-radius:9999px;transition:all .4s ease;--opacity-ease: ease-in-out;--transform-ease: cubic-bezier(.19, 1, .22, 1);--elastic-ease: cubic-bezier(.68, -.55, .27, 1.55)}.rounded-button--glide-over:hover,.rounded-button--glide-over:focus{outline:none}.button-glide-over__container{display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);position:relative;z-index:1}.button-glide-over__text{position:relative;z-index:1;transition:transform .6s var(--transform-ease);transform:translate(-.375rem)}.button-glide-over__icon{width:1.25rem;height:1.25rem;flex-shrink:0;display:block;position:relative}.button-glide-over__icon svg{width:100%;height:100%;stroke:currentColor;fill:none}.button-glide-over__icon.is-last{margin-left:.5rem;transition:opacity .5s ease,transform .6s var(--elastic-ease);opacity:1}.button-glide-over__icon.is-first{position:absolute;left:0;top:50%;transform:translateY(-50%) translate(-120%);opacity:0;transition:opacity .6s ease,transform .9s var(--elastic-ease)}.button-glide-over__background{position:absolute;inset:0;border-radius:inherit;background:var(--btn-bg-color);transition:background-color .4s ease;z-index:0}.rounded-button--glide-over:hover .button-glide-over__text{transform:translate(2rem)}.rounded-button--glide-over:hover .button-glide-over__icon.is-first{opacity:1;transform:translateY(-50%) translate(100%)}.rounded-button--glide-over:hover .button-glide-over__icon.is-last{opacity:0;transform:translate(100%)}.button-glide-over__text{white-space:normal;word-break:break-word;text-align:center;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n"] }]
         }], propDecorators: { textButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "textButton", required: true }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }] } });
 
+class ButtonFlip {
+    text = input('Color-Flip', { ...(ngDevMode ? { debugName: "text" } : {}) });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}) });
+    arrowIndex = input(0, { ...(ngDevMode ? { debugName: "arrowIndex" } : {}) });
+    direction = input(undefined, { ...(ngDevMode ? { debugName: "direction" } : {}) });
+    colorButton = input(ButtonEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
+    buttonStyle = computed(() => {
+        const color = this.colorButton();
+        let textColor, bgColor;
+        switch (color) {
+            case ButtonEnumColor.Violet:
+                textColor = 'var(--dd-gray-0)';
+                bgColor = 'var(--dd-base-secondary)';
+                break;
+            case ButtonEnumColor.Orange:
+                textColor = 'var(--dd-gray-0)';
+                bgColor = 'var(--dd-base-accent-orange)';
+                break;
+            case ButtonEnumColor.White:
+                textColor = 'var(--dd-base-600)';
+                bgColor = 'var(--dd-base-0)';
+                break;
+            case ButtonEnumColor.Gray:
+                textColor = 'var(--dd-base-600)';
+                bgColor = 'var(--dd-base-100)';
+                break;
+            case ButtonEnumColor.Dark:
+                textColor = 'var(--dd-base-0)';
+                bgColor = 'var(--dd-base-600)';
+                break;
+            default:
+                textColor = 'var(--dd-base-600)';
+                bgColor = 'var(--dd-base-0)';
+                break;
+        }
+        return {
+            '--btn-text-color': textColor,
+            '--btn-bg-color': bgColor,
+        };
+    }, { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonFlip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonFlip, isStandalone: true, selector: "duck-dev-button-flip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, arrowIndex: { classPropertyName: "arrowIndex", publicName: "arrowIndex", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"button-color-flip w-inline-block\"\n  [class.disabled]=\"disabled()\"\n  [class.is-prev]=\"direction() === 'previous'\"\n  [class.is-next]=\"direction() === 'next' || !direction()\"\n  [attr.aria-disabled]=\"disabled()\"\n  role=\"button\"\n  tabindex=\"0\"\n>\n  <span class=\"button-color-flip_inner\"\n        [style.--btn-bg-color]=\"buttonStyle()['--btn-bg-color']\"\n        [style.--btn-text-color]=\"buttonStyle()['--btn-text-color']\">\n    <span [attr.data-text]=\"text()\" class=\"button-color-flip_back\"></span>\n    <span class=\"button-color-flip_front\">\n      <span class=\"button-color-flip_bg\"></span>\n      <span class=\"button-color-flip_text\">{{ text() }}</span>\n    </span>\n  </span>\n\n  <span class=\"button-color-flip_arrow-carrier\" aria-hidden=\"true\">\n    <span [style.--index]=\"arrowIndex()\" class=\"button-color-flip_arrow\">{{ direction() === 'previous' ? '\u2190' : '\u2192' }}</span>\n  </span>\n</div>\n", styles: [".button-color-flip{--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--smooth-ease: cubic-bezier(.32, .72, 0, 1);--color-ease: cubic-bezier(.216, .62, .356, 1);--fly-distance: 140%;position:relative;display:inline-block;max-width:100%;background-color:transparent;font-size:.875rem;line-height:1em;letter-spacing:-.02em;text-transform:uppercase;text-decoration:none;-webkit-user-select:none;user-select:none;cursor:pointer;transition:transform .45s var(--elastic-ease-out);-webkit-tap-highlight-color:transparent;overflow:visible}.button-color-flip:hover,.button-color-flip:active{transform:none}.button-color-flip_inner{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;border:1px solid currentColor;border-radius:3rem;overflow:hidden;transition:transform .5s var(--elastic-ease-out),opacity .4s var(--smooth-ease);background-color:var(--btn-bg-color, var(--dd-base-secondary));color:var(--btn-text-color, var(--dd-base-600))}.button-color-flip_back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(100%);transition:opacity .3s var(--smooth-ease),transform .4s var(--smooth-ease);pointer-events:none}.button-color-flip:hover .button-color-flip_back{opacity:1;transform:translateY(0);transition-delay:.05s}.button-color-flip_arrow{display:inline-block;font-size:1.2em;margin-left:.5rem;transform:translate(calc(var(--index) * -.2rem));transition:transform .3s var(--smooth-ease)}.button-color-flip:not(.disabled):hover .button-color-flip_arrow{transform:translate(.3rem);animation:arrowBounce .6s var(--elastic-ease-out)}@keyframes arrowBounce{0%,to{transform:translate(.3rem)}50%{transform:translate(.6rem)}}.button-color-flip_front{position:relative;display:flex;align-items:center;z-index:1;transition:opacity .3s var(--smooth-ease),transform .4s var(--smooth-ease)}.button-color-flip_bg{position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);transition:width .5s var(--color-ease),height .5s var(--color-ease);z-index:0}.button-color-flip:hover .button-color-flip_bg{width:300%;height:300%}.button-color-flip_text{position:relative;white-space:nowrap;z-index:1}@media(max-width:768px){.button-color-flip{font-size:.75rem}.button-color-flip_inner{padding:.6rem 1.2rem}}.button-color-flip.disabled{pointer-events:none;opacity:.6;cursor:not-allowed}.button-color-flip.disabled:hover,.button-color-flip.disabled:active{transform:none}.button-color-flip.is-next .button-color-flip_arrow{margin-left:.5rem;margin-right:0}.button-color-flip:hover .button-color-flip.is-next .button-color-flip_arrow{animation:arrowBounceRight .6s var(--elastic-ease-out)}.button-color-flip.is-prev .button-color-flip_arrow{margin-right:.5rem;margin-left:0;transform:translate(calc(var(--index) * .2rem))}.button-color-flip:hover .button-color-flip.is-prev .button-color-flip_arrow{transform:translate(-.3rem);animation:arrowBounceLeft .6s var(--elastic-ease-out)}@keyframes arrowBounceRight{0%,to{transform:translate(.3rem)}50%{transform:translate(.6rem)}}@keyframes arrowBounceLeft{0%,to{transform:translate(-.3rem)}50%{transform:translate(-.6rem)}}.button-color-flip_arrow-carrier{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2;opacity:0;transition:transform .55s var(--elastic-ease-out),opacity .35s var(--smooth-ease)}.button-color-flip.is-next .button-color-flip_arrow-carrier,.button-color-flip:not(.is-prev):not(.is-next) .button-color-flip_arrow-carrier{transform:translate(calc(-1 * var(--fly-distance)))}.button-color-flip.is-prev .button-color-flip_arrow-carrier{transform:translate(var(--fly-distance))}.button-color-flip:not(.disabled).is-next:hover .button-color-flip_inner,.button-color-flip:not(.disabled):not(.is-prev):not(.is-next):hover .button-color-flip_inner{transform:translate(var(--fly-distance));opacity:0}.button-color-flip:not(.disabled).is-prev:hover .button-color-flip_inner{transform:translate(calc(-1 * var(--fly-distance)));opacity:0}.button-color-flip:not(.disabled).is-next:hover .button-color-flip_arrow-carrier,.button-color-flip:not(.disabled):not(.is-prev):not(.is-next):hover .button-color-flip_arrow-carrier{transform:translate(0);opacity:1}.button-color-flip:not(.disabled).is-prev:hover .button-color-flip_arrow-carrier{transform:translate(0);opacity:1}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonFlip, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-button-flip', standalone: true, template: "<div\n  class=\"button-color-flip w-inline-block\"\n  [class.disabled]=\"disabled()\"\n  [class.is-prev]=\"direction() === 'previous'\"\n  [class.is-next]=\"direction() === 'next' || !direction()\"\n  [attr.aria-disabled]=\"disabled()\"\n  role=\"button\"\n  tabindex=\"0\"\n>\n  <span class=\"button-color-flip_inner\"\n        [style.--btn-bg-color]=\"buttonStyle()['--btn-bg-color']\"\n        [style.--btn-text-color]=\"buttonStyle()['--btn-text-color']\">\n    <span [attr.data-text]=\"text()\" class=\"button-color-flip_back\"></span>\n    <span class=\"button-color-flip_front\">\n      <span class=\"button-color-flip_bg\"></span>\n      <span class=\"button-color-flip_text\">{{ text() }}</span>\n    </span>\n  </span>\n\n  <span class=\"button-color-flip_arrow-carrier\" aria-hidden=\"true\">\n    <span [style.--index]=\"arrowIndex()\" class=\"button-color-flip_arrow\">{{ direction() === 'previous' ? '\u2190' : '\u2192' }}</span>\n  </span>\n</div>\n", styles: [".button-color-flip{--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--smooth-ease: cubic-bezier(.32, .72, 0, 1);--color-ease: cubic-bezier(.216, .62, .356, 1);--fly-distance: 140%;position:relative;display:inline-block;max-width:100%;background-color:transparent;font-size:.875rem;line-height:1em;letter-spacing:-.02em;text-transform:uppercase;text-decoration:none;-webkit-user-select:none;user-select:none;cursor:pointer;transition:transform .45s var(--elastic-ease-out);-webkit-tap-highlight-color:transparent;overflow:visible}.button-color-flip:hover,.button-color-flip:active{transform:none}.button-color-flip_inner{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;border:1px solid currentColor;border-radius:3rem;overflow:hidden;transition:transform .5s var(--elastic-ease-out),opacity .4s var(--smooth-ease);background-color:var(--btn-bg-color, var(--dd-base-secondary));color:var(--btn-text-color, var(--dd-base-600))}.button-color-flip_back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(100%);transition:opacity .3s var(--smooth-ease),transform .4s var(--smooth-ease);pointer-events:none}.button-color-flip:hover .button-color-flip_back{opacity:1;transform:translateY(0);transition-delay:.05s}.button-color-flip_arrow{display:inline-block;font-size:1.2em;margin-left:.5rem;transform:translate(calc(var(--index) * -.2rem));transition:transform .3s var(--smooth-ease)}.button-color-flip:not(.disabled):hover .button-color-flip_arrow{transform:translate(.3rem);animation:arrowBounce .6s var(--elastic-ease-out)}@keyframes arrowBounce{0%,to{transform:translate(.3rem)}50%{transform:translate(.6rem)}}.button-color-flip_front{position:relative;display:flex;align-items:center;z-index:1;transition:opacity .3s var(--smooth-ease),transform .4s var(--smooth-ease)}.button-color-flip_bg{position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);transition:width .5s var(--color-ease),height .5s var(--color-ease);z-index:0}.button-color-flip:hover .button-color-flip_bg{width:300%;height:300%}.button-color-flip_text{position:relative;white-space:nowrap;z-index:1}@media(max-width:768px){.button-color-flip{font-size:.75rem}.button-color-flip_inner{padding:.6rem 1.2rem}}.button-color-flip.disabled{pointer-events:none;opacity:.6;cursor:not-allowed}.button-color-flip.disabled:hover,.button-color-flip.disabled:active{transform:none}.button-color-flip.is-next .button-color-flip_arrow{margin-left:.5rem;margin-right:0}.button-color-flip:hover .button-color-flip.is-next .button-color-flip_arrow{animation:arrowBounceRight .6s var(--elastic-ease-out)}.button-color-flip.is-prev .button-color-flip_arrow{margin-right:.5rem;margin-left:0;transform:translate(calc(var(--index) * .2rem))}.button-color-flip:hover .button-color-flip.is-prev .button-color-flip_arrow{transform:translate(-.3rem);animation:arrowBounceLeft .6s var(--elastic-ease-out)}@keyframes arrowBounceRight{0%,to{transform:translate(.3rem)}50%{transform:translate(.6rem)}}@keyframes arrowBounceLeft{0%,to{transform:translate(-.3rem)}50%{transform:translate(-.6rem)}}.button-color-flip_arrow-carrier{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2;opacity:0;transition:transform .55s var(--elastic-ease-out),opacity .35s var(--smooth-ease)}.button-color-flip.is-next .button-color-flip_arrow-carrier,.button-color-flip:not(.is-prev):not(.is-next) .button-color-flip_arrow-carrier{transform:translate(calc(-1 * var(--fly-distance)))}.button-color-flip.is-prev .button-color-flip_arrow-carrier{transform:translate(var(--fly-distance))}.button-color-flip:not(.disabled).is-next:hover .button-color-flip_inner,.button-color-flip:not(.disabled):not(.is-prev):not(.is-next):hover .button-color-flip_inner{transform:translate(var(--fly-distance));opacity:0}.button-color-flip:not(.disabled).is-prev:hover .button-color-flip_inner{transform:translate(calc(-1 * var(--fly-distance)));opacity:0}.button-color-flip:not(.disabled).is-next:hover .button-color-flip_arrow-carrier,.button-color-flip:not(.disabled):not(.is-prev):not(.is-next):hover .button-color-flip_arrow-carrier{transform:translate(0);opacity:1}.button-color-flip:not(.disabled).is-prev:hover .button-color-flip_arrow-carrier{transform:translate(0);opacity:1}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], arrowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowIndex", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
+
 class LoaderLoadingBubble {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderLoadingBubble, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderLoadingBubble, isStandalone: true, selector: "duck-dev-loader-loading-bubble", ngImport: i0, template: "<div class=\"container\">\n  <div class=\"main\">\n    <span class=\"loader\">Load&nbsp;ng</span>\n  </div>\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-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-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)}.container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.loader{color:var(--btn-text-color);position:relative;display:inline-block;margin-top:40px;font-family:Arial,Helvetica,sans-serif;font-size:48px;letter-spacing:4px;box-sizing:border-box}.loader:before{content:\"\";position:absolute;right:70px;bottom:10px;height:28px;width:5.15px;background:currentColor;box-sizing:border-box;animation:animloader1 1s linear infinite alternate}.loader:after{content:\"\";width:10px;height:10px;position:absolute;left:125px;top:2px;border-radius:50%;background:var(--dd-accent-orange);box-sizing:border-box;animation:animloader 1s linear infinite alternate}@keyframes animloader{0%{transform:translate(0) scaleX(1)}14%{transform:translate(-12px,-16px) scaleX(1.05)}28%{transform:translate(-27px,-28px) scaleX(1.07)}42%{transform:translate(-46px,-35px) scaleX(1.1)}57%{transform:translate(-70px,-37px) scaleX(1.1)}71%{transform:translate(-94px,-32px) scaleX(1.07)}85%{transform:translate(-111px,-22px) scaleX(1.05)}to{transform:translate(-125px,-9px) scaleX(1)}}@keyframes animloader1{0%{box-shadow:0 -6px,-122.9px -8px}25%,75%{box-shadow:0 0,-122.9px -8px}to{box-shadow:0 0,-122.9px -16px}}\n"] });
@@ -281,15 +329,16 @@ class ButtonBlock {
     colorGray = ButtonEnumColor.Gray;
     colorDark = ButtonEnumColor.Dark;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ButtonBlock, isStandalone: true, selector: "app-button-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'buttons.title' | transloco }}</h1>\n\n  <!-- Button Glide Over -->\n  <section class=\"component-section\">\n    <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.glideOver.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.glideOver.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-glide-over\n  textButton=\"\u0422\u0435\u043A\u0441\u0442 \u043A\u043D\u043E\u043F\u043A\u0438\"\n  [colorButton]=\"buttonColor\"\n  [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.glideOver.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>textButton</strong> ({{ 'buttons.glideOver.required' | transloco }}) - {{ 'buttons.glideOver.inputTextButton' | transloco }}</li>\n        <li><strong>colorButton</strong> - {{ 'buttons.glideOver.inputColorButton' | transloco }}</li>\n        <li><strong>padding</strong> - {{ 'buttons.glideOver.inputPadding' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.glideOver.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleWhite' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"\u041D\u0430\u0436\u043C\u0438 \u043C\u0435\u043D\u044F\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleViolet' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Violet Button\" [colorButton]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleOrange' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Orange Button\" [colorButton]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleGray' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Gray Button\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleDark' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Dark Button\" [colorButton]=\"colorDark\" />\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Button Blur Lift -->\n  <section class=\"component-section\">\n    <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.blurLift.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.blurLift.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-blur-lift\n  textButton=\"\u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u0442\u0435\u043A\u0441\u0442\"\n  [hoverText]=\"'\u0422\u0435\u043A\u0441\u0442 \u043F\u0440\u0438 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0438'\"\n  [colorButton]=\"buttonColor\"\n  [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.blurLift.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>textButton</strong> ({{ 'buttons.blurLift.required' | transloco }}) - {{ 'buttons.blurLift.inputTextButton' | transloco }}</li>\n        <li><strong>hoverText</strong> - {{ 'buttons.blurLift.inputHoverText' | transloco }}</li>\n        <li><strong>colorButton</strong> - {{ 'buttons.blurLift.inputColorButton' | transloco }}</li>\n        <li><strong>padding</strong> - {{ 'buttons.blurLift.inputPadding' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.blurLift.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleWhiteHover' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"\u041D\u0430\u0432\u0435\u0434\u0438 \u043D\u0430 \u043C\u0435\u043D\u044F\" [hoverText]=\"'\u041F\u0440\u0438\u0432\u0435\u0442!'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleViolet' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"Click Me\" [hoverText]=\"'Action!'\" [colorButton]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"Hover\" [hoverText]=\"'Orange!'\" [colorButton]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleGray' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"Gray Button\" [hoverText]=\"'Hover'\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"Dark Button\" [hoverText]=\"'Magic!'\" [colorButton]=\"colorDark\" />\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-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-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-button-glide-over,.demo-container .component-section .examples-block .example-row .example-item duck-dev-button-blur-lift{width:100%;max-width:300px}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: ButtonBlurLift, selector: "duck-dev-button-blur-lift", inputs: ["textButton", "colorButton", "padding", "hoverText"] }, { kind: "component", type: ButtonGlideOver, selector: "duck-dev-button-glide-over", inputs: ["textButton", "colorButton", "padding"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ButtonBlock, isStandalone: true, selector: "app-button-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'buttons.title' | transloco }}</h1>\n\n  <!-- Button Glide Over -->\n  <section class=\"component-section\">\n    <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.glideOver.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.glideOver.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-glide-over\n  textButton=\"\u0422\u0435\u043A\u0441\u0442 \u043A\u043D\u043E\u043F\u043A\u0438\"\n  [colorButton]=\"buttonColor\"\n  [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.glideOver.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>textButton</strong> ({{ 'buttons.glideOver.required' | transloco }}) - {{ 'buttons.glideOver.inputTextButton' | transloco }}</li>\n        <li><strong>colorButton</strong> - {{ 'buttons.glideOver.inputColorButton' | transloco }}</li>\n        <li><strong>padding</strong> - {{ 'buttons.glideOver.inputPadding' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.glideOver.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleWhite' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"\u041D\u0430\u0436\u043C\u0438 \u043C\u0435\u043D\u044F\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleViolet' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Violet Button\" [colorButton]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleOrange' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Orange Button\" [colorButton]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleGray' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Gray Button\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleDark' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Dark Button\" [colorButton]=\"colorDark\" />\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Button Blur Lift -->\n  <section class=\"component-section\">\n    <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.blurLift.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.blurLift.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-blur-lift\n  textButton=\"\u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u0442\u0435\u043A\u0441\u0442\"\n  [hoverText]=\"'\u0422\u0435\u043A\u0441\u0442 \u043F\u0440\u0438 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0438'\"\n  [colorButton]=\"buttonColor\"\n  [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.blurLift.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>textButton</strong> ({{ 'buttons.blurLift.required' | transloco }}) - {{ 'buttons.blurLift.inputTextButton' | transloco }}</li>\n        <li><strong>hoverText</strong> - {{ 'buttons.blurLift.inputHoverText' | transloco }}</li>\n        <li><strong>colorButton</strong> - {{ 'buttons.blurLift.inputColorButton' | transloco }}</li>\n        <li><strong>padding</strong> - {{ 'buttons.blurLift.inputPadding' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.blurLift.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleWhiteHover' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"\u041D\u0430\u0432\u0435\u0434\u0438 \u043D\u0430 \u043C\u0435\u043D\u044F\" [hoverText]=\"'\u041F\u0440\u0438\u0432\u0435\u0442!'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleViolet' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"Click Me\" [hoverText]=\"'Action!'\" [colorButton]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"Hover\" [hoverText]=\"'Orange!'\" [colorButton]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleGray' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"Gray Button\" [hoverText]=\"'Hover'\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"Dark Button\" [hoverText]=\"'Magic!'\" [colorButton]=\"colorDark\" />\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Button Color Flip -->\n  <section class=\"component-section\">\n    <h2>{{ 'buttons.flip.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.flip.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.flip.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-flip\n  [text]=\"'Text'\"\n  [colorButton]=\"buttonColor\"\n  [disabled]=\"false\"\n  [direction]=\"'next'\"\n  [arrowIndex]=\"0\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.flip.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>text</strong> - {{ 'buttons.flip.inputText' | transloco }}</li>\n        <li><strong>colorButton</strong> - {{ 'buttons.flip.inputColorButton' | transloco }}</li>\n        <li><strong>disabled</strong> - {{ 'buttons.flip.inputDisabled' | transloco }}</li>\n        <li><strong>direction</strong> - {{ 'buttons.flip.inputDirection' | transloco }}</li>\n        <li><strong>arrowIndex</strong> - {{ 'buttons.flip.inputArrowIndex' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.flip.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleWhite' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Click me'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleViolet' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Violet Button'\" [colorButton]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleOrange' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Orange Button'\" [colorButton]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleGray' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Gray Button'\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleDark' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Dark Button'\" [colorButton]=\"colorDark\" />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.examplePrev' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Prev'\" [direction]=\"'previous'\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleNext' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Next'\" [direction]=\"'next'\" [colorButton]=\"colorViolet\" />\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-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-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-button-glide-over,.demo-container .component-section .examples-block .example-row .example-item duck-dev-button-blur-lift{width:100%;max-width:300px}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: ButtonBlurLift, selector: "duck-dev-button-blur-lift", inputs: ["textButton", "colorButton", "padding", "hoverText"] }, { kind: "component", type: ButtonGlideOver, selector: "duck-dev-button-glide-over", inputs: ["textButton", "colorButton", "padding"] }, { kind: "component", type: ButtonFlip, selector: "duck-dev-button-flip", inputs: ["text", "disabled", "arrowIndex", "direction", "colorButton"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlock, decorators: [{
             type: Component,
             args: [{ selector: 'app-button-block', imports: [
                         ButtonBlurLift,
                         ButtonGlideOver,
-                        TranslocoPipe
-                    ], template: "<div class=\"demo-container\">\n  <h1>{{ 'buttons.title' | transloco }}</h1>\n\n  <!-- Button Glide Over -->\n  <section class=\"component-section\">\n    <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.glideOver.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.glideOver.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-glide-over\n  textButton=\"\u0422\u0435\u043A\u0441\u0442 \u043A\u043D\u043E\u043F\u043A\u0438\"\n  [colorButton]=\"buttonColor\"\n  [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.glideOver.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>textButton</strong> ({{ 'buttons.glideOver.required' | transloco }}) - {{ 'buttons.glideOver.inputTextButton' | transloco }}</li>\n        <li><strong>colorButton</strong> - {{ 'buttons.glideOver.inputColorButton' | transloco }}</li>\n        <li><strong>padding</strong> - {{ 'buttons.glideOver.inputPadding' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.glideOver.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleWhite' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"\u041D\u0430\u0436\u043C\u0438 \u043C\u0435\u043D\u044F\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleViolet' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Violet Button\" [colorButton]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleOrange' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Orange Button\" [colorButton]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleGray' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Gray Button\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleDark' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Dark Button\" [colorButton]=\"colorDark\" />\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Button Blur Lift -->\n  <section class=\"component-section\">\n    <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.blurLift.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.blurLift.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-blur-lift\n  textButton=\"\u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u0442\u0435\u043A\u0441\u0442\"\n  [hoverText]=\"'\u0422\u0435\u043A\u0441\u0442 \u043F\u0440\u0438 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0438'\"\n  [colorButton]=\"buttonColor\"\n  [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.blurLift.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>textButton</strong> ({{ 'buttons.blurLift.required' | transloco }}) - {{ 'buttons.blurLift.inputTextButton' | transloco }}</li>\n        <li><strong>hoverText</strong> - {{ 'buttons.blurLift.inputHoverText' | transloco }}</li>\n        <li><strong>colorButton</strong> - {{ 'buttons.blurLift.inputColorButton' | transloco }}</li>\n        <li><strong>padding</strong> - {{ 'buttons.blurLift.inputPadding' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.blurLift.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleWhiteHover' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"\u041D\u0430\u0432\u0435\u0434\u0438 \u043D\u0430 \u043C\u0435\u043D\u044F\" [hoverText]=\"'\u041F\u0440\u0438\u0432\u0435\u0442!'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleViolet' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"Click Me\" [hoverText]=\"'Action!'\" [colorButton]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"Hover\" [hoverText]=\"'Orange!'\" [colorButton]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleGray' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"Gray Button\" [hoverText]=\"'Hover'\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"Dark Button\" [hoverText]=\"'Magic!'\" [colorButton]=\"colorDark\" />\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-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-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-button-glide-over,.demo-container .component-section .examples-block .example-row .example-item duck-dev-button-blur-lift{width:100%;max-width:300px}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
+                        TranslocoPipe,
+                        ButtonFlip
+                    ], template: "<div class=\"demo-container\">\n  <h1>{{ 'buttons.title' | transloco }}</h1>\n\n  <!-- Button Glide Over -->\n  <section class=\"component-section\">\n    <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.glideOver.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.glideOver.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-glide-over\n  textButton=\"\u0422\u0435\u043A\u0441\u0442 \u043A\u043D\u043E\u043F\u043A\u0438\"\n  [colorButton]=\"buttonColor\"\n  [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.glideOver.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>textButton</strong> ({{ 'buttons.glideOver.required' | transloco }}) - {{ 'buttons.glideOver.inputTextButton' | transloco }}</li>\n        <li><strong>colorButton</strong> - {{ 'buttons.glideOver.inputColorButton' | transloco }}</li>\n        <li><strong>padding</strong> - {{ 'buttons.glideOver.inputPadding' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.glideOver.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleWhite' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"\u041D\u0430\u0436\u043C\u0438 \u043C\u0435\u043D\u044F\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleViolet' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Violet Button\" [colorButton]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleOrange' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Orange Button\" [colorButton]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleGray' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Gray Button\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleDark' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Dark Button\" [colorButton]=\"colorDark\" />\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Button Blur Lift -->\n  <section class=\"component-section\">\n    <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.blurLift.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.blurLift.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-blur-lift\n  textButton=\"\u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u0442\u0435\u043A\u0441\u0442\"\n  [hoverText]=\"'\u0422\u0435\u043A\u0441\u0442 \u043F\u0440\u0438 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0438'\"\n  [colorButton]=\"buttonColor\"\n  [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.blurLift.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>textButton</strong> ({{ 'buttons.blurLift.required' | transloco }}) - {{ 'buttons.blurLift.inputTextButton' | transloco }}</li>\n        <li><strong>hoverText</strong> - {{ 'buttons.blurLift.inputHoverText' | transloco }}</li>\n        <li><strong>colorButton</strong> - {{ 'buttons.blurLift.inputColorButton' | transloco }}</li>\n        <li><strong>padding</strong> - {{ 'buttons.blurLift.inputPadding' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.blurLift.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleWhiteHover' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"\u041D\u0430\u0432\u0435\u0434\u0438 \u043D\u0430 \u043C\u0435\u043D\u044F\" [hoverText]=\"'\u041F\u0440\u0438\u0432\u0435\u0442!'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleViolet' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"Click Me\" [hoverText]=\"'Action!'\" [colorButton]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"Hover\" [hoverText]=\"'Orange!'\" [colorButton]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleGray' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"Gray Button\" [hoverText]=\"'Hover'\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"Dark Button\" [hoverText]=\"'Magic!'\" [colorButton]=\"colorDark\" />\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Button Color Flip -->\n  <section class=\"component-section\">\n    <h2>{{ 'buttons.flip.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.flip.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.flip.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-flip\n  [text]=\"'Text'\"\n  [colorButton]=\"buttonColor\"\n  [disabled]=\"false\"\n  [direction]=\"'next'\"\n  [arrowIndex]=\"0\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.flip.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>text</strong> - {{ 'buttons.flip.inputText' | transloco }}</li>\n        <li><strong>colorButton</strong> - {{ 'buttons.flip.inputColorButton' | transloco }}</li>\n        <li><strong>disabled</strong> - {{ 'buttons.flip.inputDisabled' | transloco }}</li>\n        <li><strong>direction</strong> - {{ 'buttons.flip.inputDirection' | transloco }}</li>\n        <li><strong>arrowIndex</strong> - {{ 'buttons.flip.inputArrowIndex' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.flip.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleWhite' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Click me'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleViolet' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Violet Button'\" [colorButton]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleOrange' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Orange Button'\" [colorButton]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleGray' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Gray Button'\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleDark' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Dark Button'\" [colorButton]=\"colorDark\" />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.examplePrev' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Prev'\" [direction]=\"'previous'\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleNext' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Next'\" [direction]=\"'next'\" [colorButton]=\"colorViolet\" />\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-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-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-button-glide-over,.demo-container .component-section .examples-block .example-row .example-item duck-dev-button-blur-lift{width:100%;max-width:300px}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
         }] });
 
 class LoaderBlock {
@@ -2112,85 +2161,143 @@ const CUI_ICONS = {
     duckDevEyeBoldSm
 };
 
-const svgIcons = [
-    {
-        id: 'duck-dev-home',
-        name: 'Home',
-        svg: CUI_ICONS.duckDevHome
-    },
-    {
-        id: 'duck-dev-user',
-        name: 'User',
-        svg: CUI_ICONS.duckDevUser
-    },
-    {
-        id: 'duck-dev-users',
-        name: 'Users',
-        svg: CUI_ICONS.duckDevUsers
-    },
-    {
-        id: 'duck-dev-settings',
-        name: 'Settings',
-        svg: CUI_ICONS.duckDevSettings
-    },
-    {
-        id: 'duck-dev-search',
-        name: 'Search',
-        svg: CUI_ICONS.duckDevSearch
-    },
-    {
-        id: 'duck-dev-edit',
-        name: 'Edit',
-        svg: CUI_ICONS.duckDevEdit
-    },
-    {
-        id: 'duck-dev-trash',
-        name: 'Trash',
-        svg: CUI_ICONS.duckDevTrash
-    },
-    {
-        id: 'duck-dev-folder',
-        name: 'Folder',
-        svg: CUI_ICONS.duckDevFolder
-    },
-    {
-        id: 'duck-dev-check-circle',
-        name: 'Check Circle',
-        svg: CUI_ICONS.duckDevCheckCircle
-    },
-    {
-        id: 'duck-dev-alert-triangle',
-        name: 'Alert Triangle',
-        svg: CUI_ICONS.duckDevAlertTriangle
-    },
-    {
-        id: 'duck-dev-info-circle',
-        name: 'Info Circle',
-        svg: CUI_ICONS.duckDevInfoCircle
-    },
-    {
-        id: 'duck-dev-copy',
-        name: 'Copy',
-        svg: CUI_ICONS.duckDevCopy
-    }
-];
+function camelToKebab(input) {
+    // Convert camelCase/PascalCase to kebab-case
+    return input
+        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+        .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+        .toLowerCase();
+}
+function titleFromKey(key) {
+    // Remove leading 'duckDev' if present, then split into words
+    const withoutPrefix = key.startsWith('duckDev') ? key.substring('duckDev'.length) : key;
+    const words = withoutPrefix.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/([A-Z])([A-Z][a-z])/g, '$1 $2');
+    // Trim and capitalize first letter of each word (keep existing upper case like V2)
+    return words
+        .trim()
+        .split(/\s+/)
+        .map(w => w.charAt(0).toUpperCase() + w.slice(1))
+        .join(' ');
+}
+const svgIcons = Object.entries(CUI_ICONS).map(([key, svg]) => {
+    const kebab = camelToKebab(key);
+    const id = kebab.startsWith('duck-dev') ? kebab : `duck-dev-${kebab}`;
+    return {
+        id,
+        name: titleFromKey(key),
+        svg: svg,
+    };
+});
 
-class SvgBlock {
+class DuckDevInput {
+    form = input.required({ ...(ngDevMode ? { debugName: "form" } : {}) });
+    controlName = input.required({ ...(ngDevMode ? { debugName: "controlName" } : {}) });
+    label = input('', { ...(ngDevMode ? { debugName: "label" } : {}) });
+    placeholder = input('', { ...(ngDevMode ? { debugName: "placeholder" } : {}) });
+    type = input('text', { ...(ngDevMode ? { debugName: "type" } : {}) });
+    formInputType = input('input', { ...(ngDevMode ? { debugName: "formInputType" } : {}) });
+    errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInput, isStandalone: true, selector: "duck-dev-input", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<label\n  [for]=\"controlName()\"\n  class=\"form-label\"\n>\n  {{ label() }}\n</label>\n\n<div\n  class=\"form-field\"\n  [class.checkbox-inout-field]=\"formInputType() === 'checkbox'\"\n  [formGroup]=\"form()\"\n>\n  @switch (formInputType()) {\n    @case ('checkbox') {\n      <div class=\"checkbox-wrapper\">\n        <input\n          class=\"inp-cbx\"\n          [id]=\"controlName()\"\n          type=\"checkbox\"\n          formControlName=\"{{ controlName() }}\"\n        />\n        <label\n          class=\"cbx\"\n          [for]=\"controlName()\"\n        >\n                    <span>\n                        <svg\n                          width=\"12px\"\n                          height=\"10px\"\n                          viewbox=\"0 0 12 10\"\n                        >\n                            <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n                        </svg>\n                    </span>\n          <span><ng-content /></span>\n        </label>\n      </div>\n    }\n    @case ('textarea') {\n      <textarea\n        [id]=\"controlName()\"\n        formControlName=\"{{ controlName() }}\"\n        class=\"form-input form-input_textarea\"\n        [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n        [placeholder]=\"placeholder()\"\n      ></textarea>\n    }\n    @default {\n      <input\n        [id]=\"controlName()\"\n        [type]=\"type()\"\n        formControlName=\"{{ controlName() }}\"\n        class=\"form-input\"\n        [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n        [placeholder]=\"placeholder()\"\n      />\n    }\n  }\n\n  @if (errorMessage()) {\n    <div class=\"error-message\">\n      {{ errorMessage() }}\n    </div>\n  }\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-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-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)}:host{display:block;height:min-content}.form-field{height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:20px}.form-label{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:400;display:block;margin-bottom:6px;color:var(--dd-base-600)}.form-input_textarea{height:100%;resize:none}.form-input{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:500;width:100%;padding:12px 16px;border:1.5px solid var(--dd-base-300);border-radius:30px;color:var(--dd-base-600);background:var(--dd-base-0);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--dd-accent-blue);box-shadow:0 0 0 3px var(--dd-base-300)}.form-input::placeholder{color:var(--dd-gray-400)}.form-input.error{border-color:var(--dd-accent-orange);box-shadow:0 0 0 3px #ef44441a}.error-message{position:absolute;left:0;right:0;bottom:0;margin-top:0;font-size:14px;color:var(--dd-accent-orange);pointer-events:none}.content-text{width:100%}.checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:2px;margin:auto;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:5px;transform:scale(1);vertical-align:middle;border:1px solid var(--dd-base-300);transition:all .2s ease}.checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--dd-accent-blue);display:block;transform:scale(0);opacity:1;border-radius:50%}.checkbox-wrapper .cbx span:last-child{padding-left:8px}.checkbox-wrapper .cbx:hover span:first-child{border-color:var(--dd-accent-blue)}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child{background:var(--dd-accent-blue);border-color:var(--dd-accent-blue);animation:wave .4s ease}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave{50%{transform:scale(.9)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-input', imports: [
+                        ReactiveFormsModule
+                    ], template: "<label\n  [for]=\"controlName()\"\n  class=\"form-label\"\n>\n  {{ label() }}\n</label>\n\n<div\n  class=\"form-field\"\n  [class.checkbox-inout-field]=\"formInputType() === 'checkbox'\"\n  [formGroup]=\"form()\"\n>\n  @switch (formInputType()) {\n    @case ('checkbox') {\n      <div class=\"checkbox-wrapper\">\n        <input\n          class=\"inp-cbx\"\n          [id]=\"controlName()\"\n          type=\"checkbox\"\n          formControlName=\"{{ controlName() }}\"\n        />\n        <label\n          class=\"cbx\"\n          [for]=\"controlName()\"\n        >\n                    <span>\n                        <svg\n                          width=\"12px\"\n                          height=\"10px\"\n                          viewbox=\"0 0 12 10\"\n                        >\n                            <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n                        </svg>\n                    </span>\n          <span><ng-content /></span>\n        </label>\n      </div>\n    }\n    @case ('textarea') {\n      <textarea\n        [id]=\"controlName()\"\n        formControlName=\"{{ controlName() }}\"\n        class=\"form-input form-input_textarea\"\n        [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n        [placeholder]=\"placeholder()\"\n      ></textarea>\n    }\n    @default {\n      <input\n        [id]=\"controlName()\"\n        [type]=\"type()\"\n        formControlName=\"{{ controlName() }}\"\n        class=\"form-input\"\n        [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n        [placeholder]=\"placeholder()\"\n      />\n    }\n  }\n\n  @if (errorMessage()) {\n    <div class=\"error-message\">\n      {{ errorMessage() }}\n    </div>\n  }\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-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-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)}:host{display:block;height:min-content}.form-field{height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:20px}.form-label{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:400;display:block;margin-bottom:6px;color:var(--dd-base-600)}.form-input_textarea{height:100%;resize:none}.form-input{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:500;width:100%;padding:12px 16px;border:1.5px solid var(--dd-base-300);border-radius:30px;color:var(--dd-base-600);background:var(--dd-base-0);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--dd-accent-blue);box-shadow:0 0 0 3px var(--dd-base-300)}.form-input::placeholder{color:var(--dd-gray-400)}.form-input.error{border-color:var(--dd-accent-orange);box-shadow:0 0 0 3px #ef44441a}.error-message{position:absolute;left:0;right:0;bottom:0;margin-top:0;font-size:14px;color:var(--dd-accent-orange);pointer-events:none}.content-text{width:100%}.checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:2px;margin:auto;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:5px;transform:scale(1);vertical-align:middle;border:1px solid var(--dd-base-300);transition:all .2s ease}.checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--dd-accent-blue);display:block;transform:scale(0);opacity:1;border-radius:50%}.checkbox-wrapper .cbx span:last-child{padding-left:8px}.checkbox-wrapper .cbx:hover span:first-child{border-color:var(--dd-accent-blue)}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child{background:var(--dd-accent-blue);border-color:var(--dd-accent-blue);animation:wave .4s ease}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave{50%{transform:scale(.9)}}\n"] }]
+        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputType", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
+
+class DuckDevSvgBlock {
     sanitizer;
     icons = svgIcons;
-    constructor(sanitizer) {
+    // search and pagination state
+    search = signal('', { ...(ngDevMode ? { debugName: "search" } : {}) });
+    page = signal(1, { ...(ngDevMode ? { debugName: "page" } : {}) });
+    pageSize = 50;
+    searchForm;
+    sub;
+    // copy clipboard feedback
+    copiedId = signal(null, { ...(ngDevMode ? { debugName: "copiedId" } : {}) });
+    copiedTimer;
+    // derived lists
+    filteredIcons = computed(() => {
+        const q = this.search().trim().toLowerCase();
+        if (!q)
+            return this.icons;
+        return this.icons.filter(i => i.name.toLowerCase().includes(q) || i.id.toLowerCase().includes(q));
+    }, { ...(ngDevMode ? { debugName: "filteredIcons" } : {}) });
+    totalPages = computed(() => {
+        const total = this.filteredIcons().length;
+        return total === 0 ? 1 : Math.ceil(total / this.pageSize);
+    }, { ...(ngDevMode ? { debugName: "totalPages" } : {}) });
+    paginatedIcons = computed(() => {
+        const p = this.page();
+        const size = this.pageSize;
+        const start = (p - 1) * size;
+        return this.filteredIcons().slice(start, start + size);
+    }, { ...(ngDevMode ? { debugName: "paginatedIcons" } : {}) });
+    constructor(sanitizer, fb) {
         this.sanitizer = sanitizer;
+        this.searchForm = fb.group({
+            search: [''],
+        });
+        this.sub = this.searchForm.get('search').valueChanges.subscribe((value) => {
+            this.search.set(value ?? '');
+            this.page.set(1);
+        });
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+        if (this.copiedTimer)
+            clearTimeout(this.copiedTimer);
     }
     getSafeHtml(svg) {
         return this.sanitizer.bypassSecurityTrustHtml(svg);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SvgBlock, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: SvgBlock, isStandalone: true, selector: "app-svg-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n  <section class=\"component-section\">\n    <h2>{{ 'svgComponent.description' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'svgComponent.descriptionText' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n      <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n      <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n      <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n    </div>\n\n    <div class=\"example-block\">\n      <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n      <div class=\"icons-showcase\">\n        @for (icon of icons; track icon.id) {\n          <div class=\"icon-card\">\n            <div class=\"icon-display\" [innerHTML]=\"getSafeHtml(icon.svg)\"></div>\n            <div class=\"icon-name\">{{ icon.name }}</div>\n            <div class=\"icon-id\">{{ icon.id }}</div>\n            <code class=\"icon-tag\">&lt;{{ icon.id }}&gt;</code>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"implementation-block\">\n      <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n      <ol>\n        <li>{{ 'svgComponent.step1' | transloco }}</li>\n        <li>{{ 'svgComponent.step2' | transloco }}</li>\n        <li>{{ 'svgComponent.step3' | transloco }}</li>\n      </ol>\n    </div>\n  </section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}.component-section{margin-bottom:40px}.component-section h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}.component-section h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.component-section .description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-200);border-radius:8px;transition:all .3s ease;cursor:pointer}.icon-card:hover{border-color:var(--dd-base-200);background:var(--dd-base-50);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.icon-card:hover .icon-display{transform:scale(1.1);color:var(--dd-base-0)}.icon-display{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--dd-base-0);transition:all .3s ease}.icon-display ::ng-deep svg{width:100%;height:100%;fill:currentColor}.icon-name{font-size:14px;font-weight:500;color:var(--dd-base-600);margin-bottom:4px;text-align:center}.icon-id{font-size:12px;color:var(--dd-base-400);font-family:monospace;text-align:center}.icon-tag{font-size:11px;color:var(--dd-base-600);font-family:monospace;background:var(--dd-base-200);padding:4px 8px;border-radius:4px;margin-top:8px;text-align:center;border:1px solid var(--dd-base-300)}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    async copyTag(id, event) {
+        event?.stopPropagation?.();
+        const tag = `<${id}>`;
+        try {
+            if (navigator.clipboard?.writeText) {
+                await navigator.clipboard.writeText(tag);
+            }
+            else {
+                const textarea = document.createElement('textarea');
+                textarea.value = tag;
+                textarea.style.position = 'fixed';
+                textarea.style.opacity = '0';
+                document.body.appendChild(textarea);
+                textarea.select();
+                document.execCommand('copy');
+                document.body.removeChild(textarea);
+            }
+            this.copiedId.set(id);
+            if (this.copiedTimer)
+                clearTimeout(this.copiedTimer);
+            this.copiedTimer = setTimeout(() => this.copiedId.set(null), 1500);
+        }
+        catch (e) {
+            // no-op
+        }
+    }
+    prevPage() {
+        const p = this.page();
+        if (p > 1)
+            this.page.set(p - 1);
+    }
+    nextPage() {
+        const p = this.page();
+        const max = this.totalPages();
+        if (p < max)
+            this.page.set(p + 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSvgBlock, deps: [{ token: i1$1.DomSanitizer }, { token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSvgBlock, isStandalone: true, selector: "app-duck-dev-svg-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n  <section class=\"component-section\">\n    <h2>{{ 'svgComponent.description' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'svgComponent.descriptionText' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n      <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n      <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n      <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n    </div>\n\n    <div class=\"example-block\">\n      <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n\n      <div class=\"icons-toolbar\">\n        <duck-dev-input\n          [form]=\"searchForm\"\n          controlName=\"search\"\n          [placeholder]=\"'svgComponent.searchPlaceholder' | transloco\"\n          type=\"text\"\n        />\n        <div class=\"icons-stats\">\n          Page {{ page() }} / {{ totalPages() }} \u2022\n          Showing\n          {{ (paginatedIcons().length === 0) ? 0 : ((page() - 1) * pageSize + 1) }}\u2013\n          {{ ((page() - 1) * pageSize) + paginatedIcons().length }}\n          of {{ filteredIcons().length }}\n        </div>\n      </div>\n\n      @if (filteredIcons().length === 0) {\n        <p>No icons found.</p>\n      } @else {\n        <div class=\"icons-showcase\">\n          @for (icon of paginatedIcons(); track icon.id) {\n            <div class=\"icon-card\" (click)=\"copyTag(icon.id)\" role=\"button\" tabindex=\"0\">\n              <div class=\"icon-display\" [innerHTML]=\"getSafeHtml(icon.svg)\"></div>\n              <div class=\"icon-name\">{{ icon.name }}</div>\n              <div class=\"icon-id\">{{ icon.id }}</div>\n              <code class=\"icon-tag\" [title]=\"(copiedId() === icon.id) ? ('svgComponent.copied' | transloco) : ('svgComponent.clickToCopy' | transloco)\">&lt;{{ icon.id }}&gt;</code>\n              <div class=\"copy-hint\">{{ (copiedId() === icon.id) ? ('svgComponent.copied' | transloco) : ('svgComponent.clickToCopy' | transloco) }}</div>\n            </div>\n          }\n        </div>\n\n        <div class=\"pagination-controls\">\n          <duck-dev-button-flip [text]=\"'Prev'\" (click)=\"prevPage()\" [direction]=\"'previous'\"></duck-dev-button-flip>\n          <span>Page {{ page() }} of {{ totalPages() }}</span>\n          <duck-dev-button-flip [text]=\"'Next'\" (click)=\"nextPage()\"></duck-dev-button-flip>\n        </div>\n      }\n    </div>\n\n    <div class=\"implementation-block\">\n      <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n      <ol>\n        <li>{{ 'svgComponent.step1' | transloco }}</li>\n        <li>{{ 'svgComponent.step2' | transloco }}</li>\n        <li>{{ 'svgComponent.step3' | transloco }}</li>\n      </ol>\n    </div>\n  </section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}.component-section{margin-bottom:40px}.component-section h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}.component-section h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.component-section .description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-200);border-radius:8px;transition:all .3s ease;cursor:pointer}.icon-card:hover{border-color:var(--dd-base-200);background:var(--dd-base-50);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.icon-card:hover .icon-display{transform:scale(1.1);color:var(--dd-base-0)}.icon-display{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--dd-base-0);transition:all .3s ease}.icon-display ::ng-deep svg{width:100%;height:100%;fill:currentColor}.icon-name{font-size:14px;font-weight:500;color:var(--dd-base-600);margin-bottom:4px;text-align:center}.icon-id{font-size:12px;color:var(--dd-base-400);font-family:monospace;text-align:center}.icon-tag{font-size:11px;color:var(--dd-base-600);font-family:monospace;background:var(--dd-base-200);padding:4px 8px;border-radius:4px;margin-top:8px;text-align:center;border:1px solid var(--dd-base-300)}.copy-hint{position:absolute;bottom:8px;right:8px;font-size:10px;color:var(--dd-base-500);background:var(--dd-base-0);border:1px solid var(--dd-base-200);padding:2px 6px;border-radius:4px;pointer-events:none}.pagination-controls{display:flex;justify-content:space-around;align-items:center}\n"], dependencies: [{ kind: "component", type: DuckDevInput, selector: "duck-dev-input", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "errorMessage"] }, { kind: "component", type: ButtonFlip, selector: "duck-dev-button-flip", inputs: ["text", "disabled", "arrowIndex", "direction", "colorButton"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SvgBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSvgBlock, decorators: [{
             type: Component,
-            args: [{ selector: 'app-svg-block', imports: [TranslocoPipe], template: "<div class=\"demo-container\">\n  <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n  <section class=\"component-section\">\n    <h2>{{ 'svgComponent.description' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'svgComponent.descriptionText' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n      <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n      <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n      <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n    </div>\n\n    <div class=\"example-block\">\n      <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n      <div class=\"icons-showcase\">\n        @for (icon of icons; track icon.id) {\n          <div class=\"icon-card\">\n            <div class=\"icon-display\" [innerHTML]=\"getSafeHtml(icon.svg)\"></div>\n            <div class=\"icon-name\">{{ icon.name }}</div>\n            <div class=\"icon-id\">{{ icon.id }}</div>\n            <code class=\"icon-tag\">&lt;{{ icon.id }}&gt;</code>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"implementation-block\">\n      <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n      <ol>\n        <li>{{ 'svgComponent.step1' | transloco }}</li>\n        <li>{{ 'svgComponent.step2' | transloco }}</li>\n        <li>{{ 'svgComponent.step3' | transloco }}</li>\n      </ol>\n    </div>\n  </section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}.component-section{margin-bottom:40px}.component-section h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}.component-section h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.component-section .description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-200);border-radius:8px;transition:all .3s ease;cursor:pointer}.icon-card:hover{border-color:var(--dd-base-200);background:var(--dd-base-50);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.icon-card:hover .icon-display{transform:scale(1.1);color:var(--dd-base-0)}.icon-display{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--dd-base-0);transition:all .3s ease}.icon-display ::ng-deep svg{width:100%;height:100%;fill:currentColor}.icon-name{font-size:14px;font-weight:500;color:var(--dd-base-600);margin-bottom:4px;text-align:center}.icon-id{font-size:12px;color:var(--dd-base-400);font-family:monospace;text-align:center}.icon-tag{font-size:11px;color:var(--dd-base-600);font-family:monospace;background:var(--dd-base-200);padding:4px 8px;border-radius:4px;margin-top:8px;text-align:center;border:1px solid var(--dd-base-300)}\n"] }]
-        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
+            args: [{ selector: 'app-duck-dev-svg-block', imports: [TranslocoPipe, DuckDevInput, ButtonFlip], template: "<div class=\"demo-container\">\n  <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n  <section class=\"component-section\">\n    <h2>{{ 'svgComponent.description' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'svgComponent.descriptionText' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n      <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n      <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n      <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n    </div>\n\n    <div class=\"example-block\">\n      <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n\n      <div class=\"icons-toolbar\">\n        <duck-dev-input\n          [form]=\"searchForm\"\n          controlName=\"search\"\n          [placeholder]=\"'svgComponent.searchPlaceholder' | transloco\"\n          type=\"text\"\n        />\n        <div class=\"icons-stats\">\n          Page {{ page() }} / {{ totalPages() }} \u2022\n          Showing\n          {{ (paginatedIcons().length === 0) ? 0 : ((page() - 1) * pageSize + 1) }}\u2013\n          {{ ((page() - 1) * pageSize) + paginatedIcons().length }}\n          of {{ filteredIcons().length }}\n        </div>\n      </div>\n\n      @if (filteredIcons().length === 0) {\n        <p>No icons found.</p>\n      } @else {\n        <div class=\"icons-showcase\">\n          @for (icon of paginatedIcons(); track icon.id) {\n            <div class=\"icon-card\" (click)=\"copyTag(icon.id)\" role=\"button\" tabindex=\"0\">\n              <div class=\"icon-display\" [innerHTML]=\"getSafeHtml(icon.svg)\"></div>\n              <div class=\"icon-name\">{{ icon.name }}</div>\n              <div class=\"icon-id\">{{ icon.id }}</div>\n              <code class=\"icon-tag\" [title]=\"(copiedId() === icon.id) ? ('svgComponent.copied' | transloco) : ('svgComponent.clickToCopy' | transloco)\">&lt;{{ icon.id }}&gt;</code>\n              <div class=\"copy-hint\">{{ (copiedId() === icon.id) ? ('svgComponent.copied' | transloco) : ('svgComponent.clickToCopy' | transloco) }}</div>\n            </div>\n          }\n        </div>\n\n        <div class=\"pagination-controls\">\n          <duck-dev-button-flip [text]=\"'Prev'\" (click)=\"prevPage()\" [direction]=\"'previous'\"></duck-dev-button-flip>\n          <span>Page {{ page() }} of {{ totalPages() }}</span>\n          <duck-dev-button-flip [text]=\"'Next'\" (click)=\"nextPage()\"></duck-dev-button-flip>\n        </div>\n      }\n    </div>\n\n    <div class=\"implementation-block\">\n      <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n      <ol>\n        <li>{{ 'svgComponent.step1' | transloco }}</li>\n        <li>{{ 'svgComponent.step2' | transloco }}</li>\n        <li>{{ 'svgComponent.step3' | transloco }}</li>\n      </ol>\n    </div>\n  </section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}.component-section{margin-bottom:40px}.component-section h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}.component-section h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.component-section .description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-200);border-radius:8px;transition:all .3s ease;cursor:pointer}.icon-card:hover{border-color:var(--dd-base-200);background:var(--dd-base-50);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.icon-card:hover .icon-display{transform:scale(1.1);color:var(--dd-base-0)}.icon-display{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--dd-base-0);transition:all .3s ease}.icon-display ::ng-deep svg{width:100%;height:100%;fill:currentColor}.icon-name{font-size:14px;font-weight:500;color:var(--dd-base-600);margin-bottom:4px;text-align:center}.icon-id{font-size:12px;color:var(--dd-base-400);font-family:monospace;text-align:center}.icon-tag{font-size:11px;color:var(--dd-base-600);font-family:monospace;background:var(--dd-base-200);padding:4px 8px;border-radius:4px;margin-top:8px;text-align:center;border:1px solid var(--dd-base-300)}.copy-hint{position:absolute;bottom:8px;right:8px;font-size:10px;color:var(--dd-base-500);background:var(--dd-base-0);border:1px solid var(--dd-base-200);padding:2px 6px;border-radius:4px;pointer-events:none}.pagination-controls{display:flex;justify-content:space-around;align-items:center}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: i1.FormBuilder }] });
 
 class InputBlock {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2218,7 +2325,7 @@ class MainDocumentationPage {
         this.activeTab.set(tab);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MainDocumentationPage, isStandalone: true, selector: "duck-dev-main-documentation-page", ngImport: i0, template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n  @if (activeTab().id === 'buttons') {\n    <app-button-block />\n  }\n  @if (activeTab().id === 'loaders') {\n    <app-loader-block />\n  }\n  @if (activeTab().id === 'tabs') {\n    <app-tabs-block />\n  }\n  @if(activeTab().id === 'input'){\n    <app-input-block />\n  }\n  @if (activeTab().id === 'svg') {\n    <app-svg-block />\n  }\n</duck-dev-tab-vertical>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: SvgBlock, selector: "app-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: InputBlock, selector: "app-input-block" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MainDocumentationPage, isStandalone: true, selector: "duck-dev-main-documentation-page", ngImport: i0, template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n  @if (activeTab().id === 'buttons') {\n    <app-button-block />\n  }\n  @if (activeTab().id === 'loaders') {\n    <app-loader-block />\n  }\n  @if (activeTab().id === 'tabs') {\n    <app-tabs-block />\n  }\n  @if(activeTab().id === 'input'){\n    <app-input-block />\n  }\n  @if (activeTab().id === 'svg') {\n    <app-duck-dev-svg-block />\n  }\n</duck-dev-tab-vertical>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: DuckDevSvgBlock, selector: "app-duck-dev-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: InputBlock, selector: "app-input-block" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, decorators: [{
             type: Component,
@@ -2226,35 +2333,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         ButtonBlock,
                         LoaderBlock,
                         TabsBlock,
-                        SvgBlock,
+                        DuckDevSvgBlock,
                         DuckDevTabVertical,
                         InputBlock
-                    ], template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n  @if (activeTab().id === 'buttons') {\n    <app-button-block />\n  }\n  @if (activeTab().id === 'loaders') {\n    <app-loader-block />\n  }\n  @if (activeTab().id === 'tabs') {\n    <app-tabs-block />\n  }\n  @if(activeTab().id === 'input'){\n    <app-input-block />\n  }\n  @if (activeTab().id === 'svg') {\n    <app-svg-block />\n  }\n</duck-dev-tab-vertical>\n", styles: [":host{display:block;height:100%}\n"] }]
+                    ], template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n  @if (activeTab().id === 'buttons') {\n    <app-button-block />\n  }\n  @if (activeTab().id === 'loaders') {\n    <app-loader-block />\n  }\n  @if (activeTab().id === 'tabs') {\n    <app-tabs-block />\n  }\n  @if(activeTab().id === 'input'){\n    <app-input-block />\n  }\n  @if (activeTab().id === 'svg') {\n    <app-duck-dev-svg-block />\n  }\n</duck-dev-tab-vertical>\n", styles: [":host{display:block;height:100%}\n"] }]
         }] });
 
 const DuckDevLibTranslations = {
-    en: import('./duck-dev-lib-en-1BsT5Qp6.mjs'),
-    ru: import('./duck-dev-lib-ru-DZTf4Lop.mjs')
+    en: import('./duck-dev-lib-en-DAAX9t8H.mjs'),
+    ru: import('./duck-dev-lib-ru-8qXt3ziq.mjs')
 };
 
-class DuckDevInput {
-    form = input.required({ ...(ngDevMode ? { debugName: "form" } : {}) });
-    controlName = input.required({ ...(ngDevMode ? { debugName: "controlName" } : {}) });
-    label = input('', { ...(ngDevMode ? { debugName: "label" } : {}) });
-    placeholder = input('', { ...(ngDevMode ? { debugName: "placeholder" } : {}) });
-    type = input('text', { ...(ngDevMode ? { debugName: "type" } : {}) });
-    formInputType = input('input', { ...(ngDevMode ? { debugName: "formInputType" } : {}) });
-    errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInput, isStandalone: true, selector: "duck-dev-input", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<label\n  [for]=\"controlName()\"\n  class=\"form-label\"\n>\n  {{ label() }}\n</label>\n\n<div\n  class=\"form-field\"\n  [class.checkbox-inout-field]=\"formInputType() === 'checkbox'\"\n  [formGroup]=\"form()\"\n>\n  @switch (formInputType()) {\n    @case ('checkbox') {\n      <div class=\"checkbox-wrapper\">\n        <input\n          class=\"inp-cbx\"\n          [id]=\"controlName()\"\n          type=\"checkbox\"\n          formControlName=\"{{ controlName() }}\"\n        />\n        <label\n          class=\"cbx\"\n          [for]=\"controlName()\"\n        >\n                    <span>\n                        <svg\n                          width=\"12px\"\n                          height=\"10px\"\n                          viewbox=\"0 0 12 10\"\n                        >\n                            <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n                        </svg>\n                    </span>\n          <span><ng-content /></span>\n        </label>\n      </div>\n    }\n    @case ('textarea') {\n      <textarea\n        [id]=\"controlName()\"\n        formControlName=\"{{ controlName() }}\"\n        class=\"form-input form-input_textarea\"\n        [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n        [placeholder]=\"placeholder()\"\n      ></textarea>\n    }\n    @default {\n      <input\n        [id]=\"controlName()\"\n        [type]=\"type()\"\n        formControlName=\"{{ controlName() }}\"\n        class=\"form-input\"\n        [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n        [placeholder]=\"placeholder()\"\n      />\n    }\n  }\n\n  @if (errorMessage()) {\n    <div class=\"error-message\">\n      {{ errorMessage() }}\n    </div>\n  }\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-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-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)}:host{display:block;height:min-content}.form-field{height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:20px}.form-label{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:400;display:block;margin-bottom:6px;color:var(--dd-base-600)}.form-input_textarea{height:100%;resize:none}.form-input{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:500;width:100%;padding:12px 16px;border:1.5px solid var(--dd-base-300);border-radius:30px;color:var(--dd-base-600);background:var(--dd-base-0);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--dd-accent-blue);box-shadow:0 0 0 3px var(--dd-base-300)}.form-input::placeholder{color:var(--dd-gray-400)}.form-input.error{border-color:var(--dd-accent-orange);box-shadow:0 0 0 3px #ef44441a}.error-message{position:absolute;left:0;right:0;bottom:0;margin-top:0;font-size:14px;color:var(--dd-accent-orange);pointer-events:none}.content-text{width:100%}.checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:2px;margin:auto;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:5px;transform:scale(1);vertical-align:middle;border:1px solid var(--dd-base-300);transition:all .2s ease}.checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--dd-accent-blue);display:block;transform:scale(0);opacity:1;border-radius:50%}.checkbox-wrapper .cbx span:last-child{padding-left:8px}.checkbox-wrapper .cbx:hover span:first-child{border-color:var(--dd-accent-blue)}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child{background:var(--dd-accent-blue);border-color:var(--dd-accent-blue);animation:wave .4s ease}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave{50%{transform:scale(.9)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInput, decorators: [{
-            type: Component,
-            args: [{ selector: 'duck-dev-input', imports: [
-                        ReactiveFormsModule
-                    ], template: "<label\n  [for]=\"controlName()\"\n  class=\"form-label\"\n>\n  {{ label() }}\n</label>\n\n<div\n  class=\"form-field\"\n  [class.checkbox-inout-field]=\"formInputType() === 'checkbox'\"\n  [formGroup]=\"form()\"\n>\n  @switch (formInputType()) {\n    @case ('checkbox') {\n      <div class=\"checkbox-wrapper\">\n        <input\n          class=\"inp-cbx\"\n          [id]=\"controlName()\"\n          type=\"checkbox\"\n          formControlName=\"{{ controlName() }}\"\n        />\n        <label\n          class=\"cbx\"\n          [for]=\"controlName()\"\n        >\n                    <span>\n                        <svg\n                          width=\"12px\"\n                          height=\"10px\"\n                          viewbox=\"0 0 12 10\"\n                        >\n                            <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n                        </svg>\n                    </span>\n          <span><ng-content /></span>\n        </label>\n      </div>\n    }\n    @case ('textarea') {\n      <textarea\n        [id]=\"controlName()\"\n        formControlName=\"{{ controlName() }}\"\n        class=\"form-input form-input_textarea\"\n        [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n        [placeholder]=\"placeholder()\"\n      ></textarea>\n    }\n    @default {\n      <input\n        [id]=\"controlName()\"\n        [type]=\"type()\"\n        formControlName=\"{{ controlName() }}\"\n        class=\"form-input\"\n        [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n        [placeholder]=\"placeholder()\"\n      />\n    }\n  }\n\n  @if (errorMessage()) {\n    <div class=\"error-message\">\n      {{ errorMessage() }}\n    </div>\n  }\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-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-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)}:host{display:block;height:min-content}.form-field{height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:20px}.form-label{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:400;display:block;margin-bottom:6px;color:var(--dd-base-600)}.form-input_textarea{height:100%;resize:none}.form-input{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:500;width:100%;padding:12px 16px;border:1.5px solid var(--dd-base-300);border-radius:30px;color:var(--dd-base-600);background:var(--dd-base-0);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--dd-accent-blue);box-shadow:0 0 0 3px var(--dd-base-300)}.form-input::placeholder{color:var(--dd-gray-400)}.form-input.error{border-color:var(--dd-accent-orange);box-shadow:0 0 0 3px #ef44441a}.error-message{position:absolute;left:0;right:0;bottom:0;margin-top:0;font-size:14px;color:var(--dd-accent-orange);pointer-events:none}.content-text{width:100%}.checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:2px;margin:auto;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:5px;transform:scale(1);vertical-align:middle;border:1px solid var(--dd-base-300);transition:all .2s ease}.checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--dd-accent-blue);display:block;transform:scale(0);opacity:1;border-radius:50%}.checkbox-wrapper .cbx span:last-child{padding-left:8px}.checkbox-wrapper .cbx:hover span:first-child{border-color:var(--dd-accent-blue)}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child{background:var(--dd-accent-blue);border-color:var(--dd-accent-blue);animation:wave .4s ease}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave{50%{transform:scale(.9)}}\n"] }]
-        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputType", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
-
 /*
  * Public API Surface of duck-dev-lib
  */
@@ -2263,5 +2352,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonBlurLift, ButtonEnumColor, ButtonGlideOver, DuckDevInput, DuckDevLibTranslations, DuckDevTab, DuckDevTabVertical, LoaderClassic, LoaderLoadingBubble, LoaderThreeDots, MainDocumentationPage };
+export { ButtonBlurLift, ButtonEnumColor, ButtonFlip, ButtonGlideOver, DuckDevInput, DuckDevLibTranslations, DuckDevTab, DuckDevTabVertical, LoaderClassic, LoaderLoadingBubble, LoaderThreeDots, MainDocumentationPage };
 //# sourceMappingURL=duck-dev-lib.mjs.map