duck-dev-lib 0.1.4 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -781,7 +781,7 @@ class ButtonNeobrutalZigzag {
|
|
|
781
781
|
colorButton = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
782
782
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
783
783
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalZigzag, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
784
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalZigzag, isStandalone: true, selector: "duck-dev-button-neobrutal-zigzag", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "truncate", isSignal: true, isRequired: false, transformFunction: null }, wrapLabel: { classPropertyName: "wrapLabel", publicName: "wrapLabel", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dd-button--full-width": "fullWidth()", "class.dd-button--truncate": "truncate()", "class.dd-button--wrap": "wrapLabel()" } }, ngImport: i0, template: "<button class=\"neo-zigzag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"zigzag-body\">\n <span class=\"zigzag-label\">{{ label() }}</span>\n <span class=\"zigzag-text\">\n <span class=\"zigzag-text__projected\"><ng-content></ng-content></span>\n <span class=\"zigzag-text__default\">{{ text() }}</span>\n </span>\n </span>\n <span class=\"zigzag-edge\" aria-hidden=\"true\"
|
|
784
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalZigzag, isStandalone: true, selector: "duck-dev-button-neobrutal-zigzag", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "truncate", isSignal: true, isRequired: false, transformFunction: null }, wrapLabel: { classPropertyName: "wrapLabel", publicName: "wrapLabel", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dd-button--full-width": "fullWidth()", "class.dd-button--truncate": "truncate()", "class.dd-button--wrap": "wrapLabel()" } }, ngImport: i0, template: "<button class=\"neo-zigzag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"zigzag-body\">\n <span class=\"zigzag-label\">{{ label() }}</span>\n <span class=\"zigzag-text\">\n <span class=\"zigzag-text__projected\"><ng-content></ng-content></span>\n <span class=\"zigzag-text__default\">{{ text() }}</span>\n </span>\n </span>\n <span class=\"zigzag-edge\" aria-hidden=\"true\">\n <svg class=\"zigzag-edge__svg\" viewBox=\"0 0 100 14\" preserveAspectRatio=\"none\">\n <path\n class=\"zigzag-edge__shape\"\n d=\"M 0 0 L 5 14 L 10 0 L 15 14 L 20 0 L 25 14 L 30 0 L 35 14 L 40 0 L 45 14 L 50 0 L 55 14 L 60 0 L 65 14 L 70 0 L 75 14 L 80 0 L 85 14 L 90 0 L 95 14 L 100 0\"\n />\n </svg>\n </span>\n</button>\n", styles: [":host{display:var(--dd-button-display, inline-block);width:var(--dd-button-width, auto)}:host(.dd-button--full-width){--dd-button-display: block;--dd-button-width: 100%;--dd-button-min-width: 0}.neo-zigzag{position:relative;display:flex;flex-direction:column;align-items:stretch;width:var(--dd-button-width, auto);min-width:var(--dd-button-min-width, 200px);padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:var(--neo-text);transition:transform .2s ease}.neo-zigzag:hover,.neo-zigzag:focus-visible{transform:translateY(-4px)}.neo-zigzag:hover .zigzag-body,.neo-zigzag:focus-visible .zigzag-body{box-shadow:6px 6px 0 var(--neo-shadow),6px 6px 0 3px var(--dd-neo-shadow)}.neo-zigzag:hover .zigzag-edge,.neo-zigzag:focus-visible .zigzag-edge{transform:translateY(2px)}.neo-zigzag:active{transform:translateY(2px)}.neo-zigzag:active .zigzag-body{box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-zigzag:disabled{cursor:not-allowed;opacity:.6;transform:none}.zigzag-body{position:relative;display:flex;align-items:center;gap:.7rem;padding:.85rem 1.3rem;border:3px solid var(--dd-neo-ink);border-bottom:none;border-radius:8px 8px 0 0;background:var(--neo-surface);box-shadow:4px 4px 0 var(--neo-shadow),4px 4px 0 3px var(--dd-neo-shadow);transition:box-shadow .2s ease}.zigzag-label{display:inline-flex;align-items:center;justify-content:center;padding:.2rem .5rem;border:2px solid var(--dd-neo-ink);border-radius:4px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;flex-shrink:0}.zigzag-text{font-size:.95rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.zigzag-text__projected,.zigzag-text__default{display:contents}.zigzag-text__projected:not(:empty)+.zigzag-text__default{display:none}:host(.dd-button--full-width) .zigzag-body{box-sizing:border-box}:host(.dd-button--truncate) .zigzag-body{min-width:0}:host(.dd-button--truncate) .zigzag-text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.dd-button--wrap) .zigzag-text{display:block;white-space:normal;overflow-wrap:anywhere}.zigzag-edge{position:relative;display:block;width:100%;height:14px;border-left:3px solid var(--dd-neo-ink);border-right:3px solid var(--dd-neo-ink);color:var(--dd-neo-ink);transition:transform .2s ease}.zigzag-edge__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.zigzag-edge__shape{fill:var(--neo-surface);stroke:currentColor;stroke-linecap:square;stroke-linejoin:miter;stroke-width:3;vector-effect:non-scaling-stroke}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
785
785
|
}
|
|
786
786
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalZigzag, decorators: [{
|
|
787
787
|
type: Component,
|
|
@@ -789,7 +789,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
789
789
|
'[class.dd-button--full-width]': 'fullWidth()',
|
|
790
790
|
'[class.dd-button--truncate]': 'truncate()',
|
|
791
791
|
'[class.dd-button--wrap]': 'wrapLabel()',
|
|
792
|
-
}, template: "<button class=\"neo-zigzag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"zigzag-body\">\n <span class=\"zigzag-label\">{{ label() }}</span>\n <span class=\"zigzag-text\">\n <span class=\"zigzag-text__projected\"><ng-content></ng-content></span>\n <span class=\"zigzag-text__default\">{{ text() }}</span>\n </span>\n </span>\n <span class=\"zigzag-edge\" aria-hidden=\"true\"
|
|
792
|
+
}, template: "<button class=\"neo-zigzag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"zigzag-body\">\n <span class=\"zigzag-label\">{{ label() }}</span>\n <span class=\"zigzag-text\">\n <span class=\"zigzag-text__projected\"><ng-content></ng-content></span>\n <span class=\"zigzag-text__default\">{{ text() }}</span>\n </span>\n </span>\n <span class=\"zigzag-edge\" aria-hidden=\"true\">\n <svg class=\"zigzag-edge__svg\" viewBox=\"0 0 100 14\" preserveAspectRatio=\"none\">\n <path\n class=\"zigzag-edge__shape\"\n d=\"M 0 0 L 5 14 L 10 0 L 15 14 L 20 0 L 25 14 L 30 0 L 35 14 L 40 0 L 45 14 L 50 0 L 55 14 L 60 0 L 65 14 L 70 0 L 75 14 L 80 0 L 85 14 L 90 0 L 95 14 L 100 0\"\n />\n </svg>\n </span>\n</button>\n", styles: [":host{display:var(--dd-button-display, inline-block);width:var(--dd-button-width, auto)}:host(.dd-button--full-width){--dd-button-display: block;--dd-button-width: 100%;--dd-button-min-width: 0}.neo-zigzag{position:relative;display:flex;flex-direction:column;align-items:stretch;width:var(--dd-button-width, auto);min-width:var(--dd-button-min-width, 200px);padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:var(--neo-text);transition:transform .2s ease}.neo-zigzag:hover,.neo-zigzag:focus-visible{transform:translateY(-4px)}.neo-zigzag:hover .zigzag-body,.neo-zigzag:focus-visible .zigzag-body{box-shadow:6px 6px 0 var(--neo-shadow),6px 6px 0 3px var(--dd-neo-shadow)}.neo-zigzag:hover .zigzag-edge,.neo-zigzag:focus-visible .zigzag-edge{transform:translateY(2px)}.neo-zigzag:active{transform:translateY(2px)}.neo-zigzag:active .zigzag-body{box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-zigzag:disabled{cursor:not-allowed;opacity:.6;transform:none}.zigzag-body{position:relative;display:flex;align-items:center;gap:.7rem;padding:.85rem 1.3rem;border:3px solid var(--dd-neo-ink);border-bottom:none;border-radius:8px 8px 0 0;background:var(--neo-surface);box-shadow:4px 4px 0 var(--neo-shadow),4px 4px 0 3px var(--dd-neo-shadow);transition:box-shadow .2s ease}.zigzag-label{display:inline-flex;align-items:center;justify-content:center;padding:.2rem .5rem;border:2px solid var(--dd-neo-ink);border-radius:4px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;flex-shrink:0}.zigzag-text{font-size:.95rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.zigzag-text__projected,.zigzag-text__default{display:contents}.zigzag-text__projected:not(:empty)+.zigzag-text__default{display:none}:host(.dd-button--full-width) .zigzag-body{box-sizing:border-box}:host(.dd-button--truncate) .zigzag-body{min-width:0}:host(.dd-button--truncate) .zigzag-text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.dd-button--wrap) .zigzag-text{display:block;white-space:normal;overflow-wrap:anywhere}.zigzag-edge{position:relative;display:block;width:100%;height:14px;border-left:3px solid var(--dd-neo-ink);border-right:3px solid var(--dd-neo-ink);color:var(--dd-neo-ink);transition:transform .2s ease}.zigzag-edge__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.zigzag-edge__shape{fill:var(--neo-surface);stroke:currentColor;stroke-linecap:square;stroke-linejoin:miter;stroke-width:3;vector-effect:non-scaling-stroke}\n"] }]
|
|
793
793
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], truncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncate", required: false }] }], wrapLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapLabel", required: false }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
|
|
794
794
|
|
|
795
795
|
class ButtonNeobrutalTape {
|