duck-dev-lib 0.1.3 → 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.
|
@@ -22,6 +22,12 @@ const DD_NEO_PALETTES = [
|
|
|
22
22
|
{ id: 'sunset-boulevard', name: 'Sunset Boulevard', mode: 'light' },
|
|
23
23
|
{ id: 'memphis-pop', name: 'Memphis Pop', mode: 'light' },
|
|
24
24
|
{ id: 'bauhaus-bright', name: 'Bauhaus Bright', mode: 'light' },
|
|
25
|
+
{ id: 'cotton-candy', name: 'Cotton Candy', mode: 'light' },
|
|
26
|
+
{ id: 'macaron-box', name: 'Macaron Box', mode: 'light' },
|
|
27
|
+
{ id: 'sea-glass', name: 'Sea Glass', mode: 'light' },
|
|
28
|
+
{ id: 'lavender-haze', name: 'Lavender Haze', mode: 'light' },
|
|
29
|
+
{ id: 'peach-sorbet', name: 'Peach Sorbet', mode: 'light' },
|
|
30
|
+
{ id: 'mint-julep', name: 'Mint Julep', mode: 'light' },
|
|
25
31
|
{ id: 'deep-neon', name: 'Deep Neon', mode: 'dark' },
|
|
26
32
|
{ id: 'ember-glow', name: 'Ember Glow', mode: 'dark' },
|
|
27
33
|
{ id: 'toxic-garden', name: 'Toxic Garden', mode: 'dark' },
|
|
@@ -773,7 +779,7 @@ class ButtonNeobrutalZigzag {
|
|
|
773
779
|
colorButton = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
774
780
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
775
781
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalZigzag, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
776
|
-
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\"
|
|
782
|
+
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"] }] });
|
|
777
783
|
}
|
|
778
784
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalZigzag, decorators: [{
|
|
779
785
|
type: Component,
|
|
@@ -781,7 +787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
781
787
|
'[class.dd-button--full-width]': 'fullWidth()',
|
|
782
788
|
'[class.dd-button--truncate]': 'truncate()',
|
|
783
789
|
'[class.dd-button--wrap]': 'wrapLabel()',
|
|
784
|
-
}, 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\"
|
|
790
|
+
}, 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"] }]
|
|
785
791
|
}], 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 }] }] } });
|
|
786
792
|
|
|
787
793
|
class ButtonNeobrutalTape {
|