@w2p-ui/kit 0.0.24 → 0.1.0

package/fesm2022/w2p-ui-kit-components-button.mjs

@@ -0,0 +1,25 @@
+import * as i0 from '@angular/core';
+import { output, input, computed, Component } from '@angular/core';
+import { NavArrowIconComponent } from '@w2p-ui/icons';
+
+class W2pButton {
+    onClick = output();
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        return `button--${this.variant()}`;
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: W2pButton, isStandalone: true, selector: "w2p-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <div class=\"button__separator\"></div>\n\n  <div class=\"button__text\">\n    <p><ng-content select=\"[label]\"></ng-content></p>\n    <span> <ng-content select=\"[description]\"></ng-content>\n    </span>\n  </div>\n\n  <div class=\"button__action\">\n    <div class=\"button__action-icon\">\n      <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n    </div>\n  </div>\n</button>", styles: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";:host{--w2p-ui-button-width: 20.5rem}.button{display:flex;justify-content:space-between;width:var(--w2p-ui-button-width);padding:var(--spasing-fractional-35, .875rem) var(--Spasing-4, 1rem);align-items:center;gap:var(--Spasing-3, .75rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1.5rem;width:1.5rem;height:1.5rem}.button__separator{width:1px;height:1.5rem;background:var(--separator-color)}.button__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Spasing-2, .5rem);flex:1 0 0}.button__text p{color:var(--label-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:1rem;font-style:normal;font-weight:500;line-height:normal}.button__text span{color:var(--description-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:.75rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.button__action{display:flex;width:1.25rem;height:1.25rem;padding:var(--spasing-fractional-05, .125rem);flex-direction:column;justify-content:center;align-items:center;gap:var(--Spasing-0, 0);flex-shrink:0;aspect-ratio:1/1;background:var(--action-icon-background);border:var(--action-icon-border);border-radius:var(--action-icon-radius);color:var(--action-icon-color)}.button__action w2p-ui-icon-nav-arrow{display:contents;--w2p-ui-icon-size: .75rem}.button__action-icon{display:contents}\n", ".button{--action-icon-radius: var(--Border-radius-999, 62.4375rem)}.button--primary{--bg-color: var(--Brand-Primary-Default, #f3400d);--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-radius: var(--Border-radius-999, 62.4375rem);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--primary:hover{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100% ), var(--Base-Inverse-Default, #fff);--icon-bg-color: var(--Base-Inverse-95, rgba(255, 255, 255, .95));--action-icon-color: var(--Brand-Primary-90, rgba(243, 64, 13, .9));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}}.button--primary:active{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 0%, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Brand-Primary-70, rgba(243, 64, 13, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--primary:disabled{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 0%, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--description-color: var(--Base-Base-50, rgba(11, 11, 11, .5));--action-icon-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--action-icon-border: none;--action-icon-background: var(--Base-Base-30, rgba(11, 11, 11, .3));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}.button--neutral{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--neutral:hover{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 0%, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.button--neutral:active{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Base-Base-Default, #0b0b0b) --action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--neutral:disabled{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--description-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: none;--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}\n"], dependencies: [{ kind: "component", type: NavArrowIconComponent, selector: "w2p-ui-icon-nav-arrow" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'w2p-button', imports: [NavArrowIconComponent], template: "<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <div class=\"button__separator\"></div>\n\n  <div class=\"button__text\">\n    <p><ng-content select=\"[label]\"></ng-content></p>\n    <span> <ng-content select=\"[description]\"></ng-content>\n    </span>\n  </div>\n\n  <div class=\"button__action\">\n    <div class=\"button__action-icon\">\n      <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n    </div>\n  </div>\n</button>", styles: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";:host{--w2p-ui-button-width: 20.5rem}.button{display:flex;justify-content:space-between;width:var(--w2p-ui-button-width);padding:var(--spasing-fractional-35, .875rem) var(--Spasing-4, 1rem);align-items:center;gap:var(--Spasing-3, .75rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1.5rem;width:1.5rem;height:1.5rem}.button__separator{width:1px;height:1.5rem;background:var(--separator-color)}.button__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Spasing-2, .5rem);flex:1 0 0}.button__text p{color:var(--label-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:1rem;font-style:normal;font-weight:500;line-height:normal}.button__text span{color:var(--description-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:.75rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.button__action{display:flex;width:1.25rem;height:1.25rem;padding:var(--spasing-fractional-05, .125rem);flex-direction:column;justify-content:center;align-items:center;gap:var(--Spasing-0, 0);flex-shrink:0;aspect-ratio:1/1;background:var(--action-icon-background);border:var(--action-icon-border);border-radius:var(--action-icon-radius);color:var(--action-icon-color)}.button__action w2p-ui-icon-nav-arrow{display:contents;--w2p-ui-icon-size: .75rem}.button__action-icon{display:contents}\n", ".button{--action-icon-radius: var(--Border-radius-999, 62.4375rem)}.button--primary{--bg-color: var(--Brand-Primary-Default, #f3400d);--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-radius: var(--Border-radius-999, 62.4375rem);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--primary:hover{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100% ), var(--Base-Inverse-Default, #fff);--icon-bg-color: var(--Base-Inverse-95, rgba(255, 255, 255, .95));--action-icon-color: var(--Brand-Primary-90, rgba(243, 64, 13, .9));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}}.button--primary:active{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 0%, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Brand-Primary-70, rgba(243, 64, 13, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--primary:disabled{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 0%, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--description-color: var(--Base-Base-50, rgba(11, 11, 11, .5));--action-icon-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--action-icon-border: none;--action-icon-background: var(--Base-Base-30, rgba(11, 11, 11, .3));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}.button--neutral{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--neutral:hover{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 0%, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.button--neutral:active{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Base-Base-Default, #0b0b0b) --action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--neutral:disabled{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--description-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: none;--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}\n"] }]
+        }], propDecorators: { onClick: [{ type: i0.Output, args: ["onClick"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { W2pButton };
+//# sourceMappingURL=w2p-ui-kit-components-button.mjs.map

package/fesm2022/w2p-ui-kit-components-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"w2p-ui-kit-components-button.mjs","sources":["../../../projects/kit/components/button/button.ts","../../../projects/kit/components/button/button.html","../../../projects/kit/components/button/w2p-ui-kit-components-button.ts"],"sourcesContent":["import { Component, computed, input, output } from '@angular/core';\nimport { NavArrowIconComponent } from '@w2p-ui/icons';\n\n@Component({\n  selector: 'w2p-button',\n  imports: [NavArrowIconComponent],\n  templateUrl: './button.html',\n  styleUrls: ['./button.scss', './variants.scss'],\n})\nexport class W2pButton {\n  public readonly onClick = output<void>();\n  public readonly variant = input<'primary' | 'neutral'>('primary');\n  public readonly disabled = input<boolean>(false);\n\n  protected readonly classes = computed((): string => {\n    return `button--${this.variant()}`;\n  });\n}\n","<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <div class=\"button__separator\"></div>\n\n  <div class=\"button__text\">\n    <p><ng-content select=\"[label]\"></ng-content></p>\n    <span> <ng-content select=\"[description]\"></ng-content>\n    </span>\n  </div>\n\n  <div class=\"button__action\">\n    <div class=\"button__action-icon\">\n      <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n    </div>\n  </div>\n</button>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MASa,SAAS,CAAA;IACJ,OAAO,GAAG,MAAM,EAAQ;AACxB,IAAA,OAAO,GAAG,KAAK,CAAwB,SAAS,8EAAC;AACjD,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAE7B,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAa;AACjD,QAAA,OAAO,WAAW,IAAI,CAAC,OAAO,EAAE,EAAE;AACpC,IAAA,CAAC,8EAAC;wGAPS,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECTtB,+jBAkBS,EAAA,MAAA,EAAA,CAAA,8oDAAA,EAAA,+1JAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDbG,qBAAqB,EAAA,QAAA,EAAA,uBAAA,EAAA,CAAA,EAAA,CAAA;;4FAIpB,SAAS,EAAA,UAAA,EAAA,CAAA;kBANrB,SAAS;+BACE,YAAY,EAAA,OAAA,EACb,CAAC,qBAAqB,CAAC,EAAA,QAAA,EAAA,+jBAAA,EAAA,MAAA,EAAA,CAAA,8oDAAA,EAAA,+1JAAA,CAAA,EAAA;;;AELlC;;AAEG;;;;"}

package/fesm2022/w2p-ui-kit-components.mjs

@@ -0,0 +1,25 @@
+import * as i0 from '@angular/core';
+import { output, input, computed, Component } from '@angular/core';
+import { NavArrowIconComponent } from '@w2p-ui/icons';
+
+class W2pButton {
+    onClick = output();
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        return `button--${this.variant()}`;
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: W2pButton, isStandalone: true, selector: "w2p-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <div class=\"button__separator\"></div>\n\n  <div class=\"button__text\">\n    <p><ng-content select=\"[label]\"></ng-content></p>\n    <span> <ng-content select=\"[description]\"></ng-content>\n    </span>\n  </div>\n\n  <div class=\"button__action\">\n    <div class=\"button__action-icon\">\n      <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n    </div>\n  </div>\n</button>", styles: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";:host{--w2p-ui-button-width: 20.5rem}.button{display:flex;justify-content:space-between;width:var(--w2p-ui-button-width);padding:var(--spasing-fractional-35, .875rem) var(--Spasing-4, 1rem);align-items:center;gap:var(--Spasing-3, .75rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1.5rem;width:1.5rem;height:1.5rem}.button__separator{width:1px;height:1.5rem;background:var(--separator-color)}.button__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Spasing-2, .5rem);flex:1 0 0}.button__text p{color:var(--label-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:1rem;font-style:normal;font-weight:500;line-height:normal}.button__text span{color:var(--description-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:.75rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.button__action{display:flex;width:1.25rem;height:1.25rem;padding:var(--spasing-fractional-05, .125rem);flex-direction:column;justify-content:center;align-items:center;gap:var(--Spasing-0, 0);flex-shrink:0;aspect-ratio:1/1;background:var(--action-icon-background);border:var(--action-icon-border);border-radius:var(--action-icon-radius);color:var(--action-icon-color)}.button__action w2p-ui-icon-nav-arrow{display:contents;--w2p-ui-icon-size: .75rem}.button__action-icon{display:contents}\n", ".button{--action-icon-radius: var(--Border-radius-999, 62.4375rem)}.button--primary{--bg-color: var(--Brand-Primary-Default, #f3400d);--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-radius: var(--Border-radius-999, 62.4375rem);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--primary:hover{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100% ), var(--Base-Inverse-Default, #fff);--icon-bg-color: var(--Base-Inverse-95, rgba(255, 255, 255, .95));--action-icon-color: var(--Brand-Primary-90, rgba(243, 64, 13, .9));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}}.button--primary:active{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 0%, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Brand-Primary-70, rgba(243, 64, 13, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--primary:disabled{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 0%, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--description-color: var(--Base-Base-50, rgba(11, 11, 11, .5));--action-icon-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--action-icon-border: none;--action-icon-background: var(--Base-Base-30, rgba(11, 11, 11, .3));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}.button--neutral{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--neutral:hover{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 0%, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.button--neutral:active{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Base-Base-Default, #0b0b0b) --action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--neutral:disabled{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--description-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: none;--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}\n"], dependencies: [{ kind: "component", type: NavArrowIconComponent, selector: "w2p-ui-icon-nav-arrow" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'w2p-button', imports: [NavArrowIconComponent], template: "<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <div class=\"button__separator\"></div>\n\n  <div class=\"button__text\">\n    <p><ng-content select=\"[label]\"></ng-content></p>\n    <span> <ng-content select=\"[description]\"></ng-content>\n    </span>\n  </div>\n\n  <div class=\"button__action\">\n    <div class=\"button__action-icon\">\n      <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n    </div>\n  </div>\n</button>", styles: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";:host{--w2p-ui-button-width: 20.5rem}.button{display:flex;justify-content:space-between;width:var(--w2p-ui-button-width);padding:var(--spasing-fractional-35, .875rem) var(--Spasing-4, 1rem);align-items:center;gap:var(--Spasing-3, .75rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1.5rem;width:1.5rem;height:1.5rem}.button__separator{width:1px;height:1.5rem;background:var(--separator-color)}.button__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Spasing-2, .5rem);flex:1 0 0}.button__text p{color:var(--label-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:1rem;font-style:normal;font-weight:500;line-height:normal}.button__text span{color:var(--description-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:.75rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.button__action{display:flex;width:1.25rem;height:1.25rem;padding:var(--spasing-fractional-05, .125rem);flex-direction:column;justify-content:center;align-items:center;gap:var(--Spasing-0, 0);flex-shrink:0;aspect-ratio:1/1;background:var(--action-icon-background);border:var(--action-icon-border);border-radius:var(--action-icon-radius);color:var(--action-icon-color)}.button__action w2p-ui-icon-nav-arrow{display:contents;--w2p-ui-icon-size: .75rem}.button__action-icon{display:contents}\n", ".button{--action-icon-radius: var(--Border-radius-999, 62.4375rem)}.button--primary{--bg-color: var(--Brand-Primary-Default, #f3400d);--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-radius: var(--Border-radius-999, 62.4375rem);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--primary:hover{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100% ), var(--Base-Inverse-Default, #fff);--icon-bg-color: var(--Base-Inverse-95, rgba(255, 255, 255, .95));--action-icon-color: var(--Brand-Primary-90, rgba(243, 64, 13, .9));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}}.button--primary:active{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 0%, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Brand-Primary-70, rgba(243, 64, 13, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--primary:disabled{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 0%, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--description-color: var(--Base-Base-50, rgba(11, 11, 11, .5));--action-icon-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--action-icon-border: none;--action-icon-background: var(--Base-Base-30, rgba(11, 11, 11, .3));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}.button--neutral{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--neutral:hover{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 0%, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.button--neutral:active{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Base-Base-Default, #0b0b0b) --action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--neutral:disabled{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--description-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: none;--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}\n"] }]
+        }], propDecorators: { onClick: [{ type: i0.Output, args: ["onClick"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { W2pButton };
+//# sourceMappingURL=w2p-ui-kit-components.mjs.map

package/fesm2022/w2p-ui-kit-components.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"w2p-ui-kit-components.mjs","sources":["../../../projects/kit/components/button/button.ts","../../../projects/kit/components/button/button.html","../../../projects/kit/components/w2p-ui-kit-components.ts"],"sourcesContent":["import { Component, computed, input, output } from '@angular/core';\nimport { NavArrowIconComponent } from '@w2p-ui/icons';\n\n@Component({\n  selector: 'w2p-button',\n  imports: [NavArrowIconComponent],\n  templateUrl: './button.html',\n  styleUrls: ['./button.scss', './variants.scss'],\n})\nexport class W2pButton {\n  public readonly onClick = output<void>();\n  public readonly variant = input<'primary' | 'neutral'>('primary');\n  public readonly disabled = input<boolean>(false);\n\n  protected readonly classes = computed((): string => {\n    return `button--${this.variant()}`;\n  });\n}\n","<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <div class=\"button__separator\"></div>\n\n  <div class=\"button__text\">\n    <p><ng-content select=\"[label]\"></ng-content></p>\n    <span> <ng-content select=\"[description]\"></ng-content>\n    </span>\n  </div>\n\n  <div class=\"button__action\">\n    <div class=\"button__action-icon\">\n      <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n    </div>\n  </div>\n</button>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MASa,SAAS,CAAA;IACJ,OAAO,GAAG,MAAM,EAAQ;AACxB,IAAA,OAAO,GAAG,KAAK,CAAwB,SAAS,8EAAC;AACjD,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAE7B,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAa;AACjD,QAAA,OAAO,WAAW,IAAI,CAAC,OAAO,EAAE,EAAE;AACpC,IAAA,CAAC,8EAAC;wGAPS,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECTtB,+jBAkBS,EAAA,MAAA,EAAA,CAAA,8oDAAA,EAAA,+1JAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDbG,qBAAqB,EAAA,QAAA,EAAA,uBAAA,EAAA,CAAA,EAAA,CAAA;;4FAIpB,SAAS,EAAA,UAAA,EAAA,CAAA;kBANrB,SAAS;+BACE,YAAY,EAAA,OAAA,EACb,CAAC,qBAAqB,CAAC,EAAA,QAAA,EAAA,+jBAAA,EAAA,MAAA,EAAA,CAAA,8oDAAA,EAAA,+1JAAA,CAAA,EAAA;;;AELlC;;AAEG;;;;"}

package/fesm2022/w2p-ui-kit.mjs

@@ -0,0 +1,25 @@
+import * as i0 from '@angular/core';
+import { output, input, computed, Component } from '@angular/core';
+import { NavArrowIconComponent } from '@w2p-ui/icons';
+
+class W2pButton {
+    onClick = output();
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        return `button--${this.variant()}`;
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: W2pButton, isStandalone: true, selector: "w2p-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <div class=\"button__separator\"></div>\n\n  <div class=\"button__text\">\n    <p><ng-content select=\"[label]\"></ng-content></p>\n    <span> <ng-content select=\"[description]\"></ng-content>\n    </span>\n  </div>\n\n  <div class=\"button__action\">\n    <div class=\"button__action-icon\">\n      <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n    </div>\n  </div>\n</button>", styles: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";:host{--w2p-ui-button-width: 20.5rem}.button{display:flex;justify-content:space-between;width:var(--w2p-ui-button-width);padding:var(--spasing-fractional-35, .875rem) var(--Spasing-4, 1rem);align-items:center;gap:var(--Spasing-3, .75rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1.5rem;width:1.5rem;height:1.5rem}.button__separator{width:1px;height:1.5rem;background:var(--separator-color)}.button__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Spasing-2, .5rem);flex:1 0 0}.button__text p{color:var(--label-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:1rem;font-style:normal;font-weight:500;line-height:normal}.button__text span{color:var(--description-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:.75rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.button__action{display:flex;width:1.25rem;height:1.25rem;padding:var(--spasing-fractional-05, .125rem);flex-direction:column;justify-content:center;align-items:center;gap:var(--Spasing-0, 0);flex-shrink:0;aspect-ratio:1/1;background:var(--action-icon-background);border:var(--action-icon-border);border-radius:var(--action-icon-radius);color:var(--action-icon-color)}.button__action w2p-ui-icon-nav-arrow{display:contents;--w2p-ui-icon-size: .75rem}.button__action-icon{display:contents}\n", ".button{--action-icon-radius: var(--Border-radius-999, 62.4375rem)}.button--primary{--bg-color: var(--Brand-Primary-Default, #f3400d);--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-radius: var(--Border-radius-999, 62.4375rem);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--primary:hover{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100% ), var(--Base-Inverse-Default, #fff);--icon-bg-color: var(--Base-Inverse-95, rgba(255, 255, 255, .95));--action-icon-color: var(--Brand-Primary-90, rgba(243, 64, 13, .9));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}}.button--primary:active{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 0%, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Brand-Primary-70, rgba(243, 64, 13, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--primary:disabled{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 0%, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--description-color: var(--Base-Base-50, rgba(11, 11, 11, .5));--action-icon-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--action-icon-border: none;--action-icon-background: var(--Base-Base-30, rgba(11, 11, 11, .3));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}.button--neutral{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--neutral:hover{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 0%, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.button--neutral:active{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Base-Base-Default, #0b0b0b) --action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--neutral:disabled{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--description-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: none;--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}\n"], dependencies: [{ kind: "component", type: NavArrowIconComponent, selector: "w2p-ui-icon-nav-arrow" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'w2p-button', imports: [NavArrowIconComponent], template: "<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <div class=\"button__separator\"></div>\n\n  <div class=\"button__text\">\n    <p><ng-content select=\"[label]\"></ng-content></p>\n    <span> <ng-content select=\"[description]\"></ng-content>\n    </span>\n  </div>\n\n  <div class=\"button__action\">\n    <div class=\"button__action-icon\">\n      <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n    </div>\n  </div>\n</button>", styles: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";:host{--w2p-ui-button-width: 20.5rem}.button{display:flex;justify-content:space-between;width:var(--w2p-ui-button-width);padding:var(--spasing-fractional-35, .875rem) var(--Spasing-4, 1rem);align-items:center;gap:var(--Spasing-3, .75rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1.5rem;width:1.5rem;height:1.5rem}.button__separator{width:1px;height:1.5rem;background:var(--separator-color)}.button__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Spasing-2, .5rem);flex:1 0 0}.button__text p{color:var(--label-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:1rem;font-style:normal;font-weight:500;line-height:normal}.button__text span{color:var(--description-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:.75rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.button__action{display:flex;width:1.25rem;height:1.25rem;padding:var(--spasing-fractional-05, .125rem);flex-direction:column;justify-content:center;align-items:center;gap:var(--Spasing-0, 0);flex-shrink:0;aspect-ratio:1/1;background:var(--action-icon-background);border:var(--action-icon-border);border-radius:var(--action-icon-radius);color:var(--action-icon-color)}.button__action w2p-ui-icon-nav-arrow{display:contents;--w2p-ui-icon-size: .75rem}.button__action-icon{display:contents}\n", ".button{--action-icon-radius: var(--Border-radius-999, 62.4375rem)}.button--primary{--bg-color: var(--Brand-Primary-Default, #f3400d);--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-radius: var(--Border-radius-999, 62.4375rem);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--primary:hover{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100% ), var(--Base-Inverse-Default, #fff);--icon-bg-color: var(--Base-Inverse-95, rgba(255, 255, 255, .95));--action-icon-color: var(--Brand-Primary-90, rgba(243, 64, 13, .9));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}}.button--primary:active{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 0%, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Brand-Primary-70, rgba(243, 64, 13, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--primary:disabled{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 0%, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--description-color: var(--Base-Base-50, rgba(11, 11, 11, .5));--action-icon-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--action-icon-border: none;--action-icon-background: var(--Base-Base-30, rgba(11, 11, 11, .3));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}.button--neutral{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--neutral:hover{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 0%, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.button--neutral:active{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Base-Base-Default, #0b0b0b) --action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--neutral:disabled{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--description-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: none;--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}\n"] }]
+        }], propDecorators: { onClick: [{ type: i0.Output, args: ["onClick"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { W2pButton };
+//# sourceMappingURL=w2p-ui-kit.mjs.map

package/fesm2022/w2p-ui-kit.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"w2p-ui-kit.mjs","sources":["../../../projects/kit/components/button/button.ts","../../../projects/kit/components/button/button.html","../../../projects/kit/w2p-ui-kit.ts"],"sourcesContent":["import { Component, computed, input, output } from '@angular/core';\nimport { NavArrowIconComponent } from '@w2p-ui/icons';\n\n@Component({\n  selector: 'w2p-button',\n  imports: [NavArrowIconComponent],\n  templateUrl: './button.html',\n  styleUrls: ['./button.scss', './variants.scss'],\n})\nexport class W2pButton {\n  public readonly onClick = output<void>();\n  public readonly variant = input<'primary' | 'neutral'>('primary');\n  public readonly disabled = input<boolean>(false);\n\n  protected readonly classes = computed((): string => {\n    return `button--${this.variant()}`;\n  });\n}\n","<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <div class=\"button__separator\"></div>\n\n  <div class=\"button__text\">\n    <p><ng-content select=\"[label]\"></ng-content></p>\n    <span> <ng-content select=\"[description]\"></ng-content>\n    </span>\n  </div>\n\n  <div class=\"button__action\">\n    <div class=\"button__action-icon\">\n      <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n    </div>\n  </div>\n</button>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MASa,SAAS,CAAA;IACJ,OAAO,GAAG,MAAM,EAAQ;AACxB,IAAA,OAAO,GAAG,KAAK,CAAwB,SAAS,8EAAC;AACjD,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAE7B,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAa;AACjD,QAAA,OAAO,WAAW,IAAI,CAAC,OAAO,EAAE,EAAE;AACpC,IAAA,CAAC,8EAAC;wGAPS,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECTtB,+jBAkBS,EAAA,MAAA,EAAA,CAAA,8oDAAA,EAAA,+1JAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDbG,qBAAqB,EAAA,QAAA,EAAA,uBAAA,EAAA,CAAA,EAAA,CAAA;;4FAIpB,SAAS,EAAA,UAAA,EAAA,CAAA;kBANrB,SAAS;+BACE,YAAY,EAAA,OAAA,EACb,CAAC,qBAAqB,CAAC,EAAA,QAAA,EAAA,+jBAAA,EAAA,MAAA,EAAA,CAAA,8oDAAA,EAAA,+1JAAA,CAAA,EAAA;;;AELlC;;AAEG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@w2p-ui/kit",
-  "version": "0.0.24",
+  "version": "0.1.0",
   "peerDependencies": {
     "@angular/common": "^21.2.0",
     "@angular/core": "^21.2.0"
@@ -9,5 +9,25 @@
     "@w2p-ui/icons": "^0.0.11",
     "tslib": "^2.3.0"
   },
-  "sideEffects": false
-}
+  "sideEffects": false,
+  "module": "fesm2022/w2p-ui-kit.mjs",
+  "typings": "types/w2p-ui-kit.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/w2p-ui-kit.d.ts",
+      "default": "./fesm2022/w2p-ui-kit.mjs"
+    },
+    "./components": {
+      "types": "./types/w2p-ui-kit-components.d.ts",
+      "default": "./fesm2022/w2p-ui-kit-components.mjs"
+    },
+    "./components/button": {
+      "types": "./types/w2p-ui-kit-components-button.d.ts",
+      "default": "./fesm2022/w2p-ui-kit-components-button.mjs"
+    }
+  },
+  "type": "module"
+}

package/types/w2p-ui-kit-components-button.d.ts

@@ -0,0 +1,12 @@
+import * as _angular_core from '@angular/core';
+
+declare class W2pButton {
+    readonly onClick: _angular_core.OutputEmitterRef<void>;
+    readonly variant: _angular_core.InputSignal<"primary" | "neutral">;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<W2pButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pButton, "w2p-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["[icon]", "[label]", "[description]"], true, never>;
+}
+
+export { W2pButton };

package/types/w2p-ui-kit-components.d.ts

@@ -0,0 +1,12 @@
+import * as _angular_core from '@angular/core';
+
+declare class W2pButton {
+    readonly onClick: _angular_core.OutputEmitterRef<void>;
+    readonly variant: _angular_core.InputSignal<"primary" | "neutral">;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<W2pButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pButton, "w2p-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["[icon]", "[label]", "[description]"], true, never>;
+}
+
+export { W2pButton };

package/types/w2p-ui-kit.d.ts

@@ -0,0 +1,12 @@
+import * as _angular_core from '@angular/core';
+
+declare class W2pButton {
+    readonly onClick: _angular_core.OutputEmitterRef<void>;
+    readonly variant: _angular_core.InputSignal<"primary" | "neutral">;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<W2pButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pButton, "w2p-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["[icon]", "[label]", "[description]"], true, never>;
+}
+
+export { W2pButton };

package/.storybook/main.ts

@@ -1,7 +0,0 @@
-import type { StorybookConfig } from '@storybook/angular';
-const config: StorybookConfig = {
-  stories: ['../**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [],
-  framework: '@storybook/angular',
-};
-export default config;

package/.storybook/preview.ts

@@ -1,14 +0,0 @@
-import type { Preview } from '@storybook/angular';
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;

package/.storybook/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "extends": "../tsconfig.lib.json",
-  "compilerOptions": {
-    "types": ["node"],
-    "allowSyntheticDefaultImports": true,
-    "resolveJsonModule": true
-  },
-  "exclude": ["../test.ts", "../**/*.spec.ts"],
-  "include": ["../**/*.ts", "../**/*.stories.*", "./preview.ts"],
-  "files": ["./typings.d.ts"]
-}

package/.storybook/typings.d.ts

@@ -1,4 +0,0 @@
-declare module '*.md' {
-  const content: string;
-  export default content;
-}

package/components/button/button.html

@@ -1,19 +0,0 @@
-<button [disabled]="disabled()" [class]="'button ' + classes()" (click)="onClick.emit()">
-  <div class="button__icon">
-    <ng-content select="[icon]"></ng-content>
-  </div>
-
-  <div class="button__separator"></div>
-
-  <div class="button__text">
-    <p><ng-content select="[label]"></ng-content></p>
-    <span> <ng-content select="[description]"></ng-content>
-    </span>
-  </div>
-
-  <div class="button__action">
-    <div class="button__action-icon">
-      <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>
-    </div>
-  </div>
-</button>

package/components/button/button.scss

@@ -1,93 +0,0 @@
-@import url('https://fonts.cdnfonts.com/css/sf-pro-display');
-
-:host {
-  --w2p-ui-button-width: 20.5rem;
-}
-
-.button {
-  display: flex;
-  justify-content: space-between;
-  width: var(--w2p-ui-button-width);
-  padding: var(--spasing-fractional-35, 0.875rem) var(--Spasing-4, 1rem);
-  align-items: center;
-  gap: var(--Spasing-3, 0.75rem);
-
-  background: var(--bg-color);
-  border: 1px solid var(--border-color);
-  border-radius: var(--Border-radius-3, 0.75rem);
-
-  &__icon {
-    color: var(--icon-bg-color);
-    --w2p-ui-icon-size: 1.5rem;
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-
-  &__separator {
-    width: 1px;
-    height: 1.5rem;
-    background: var(--separator-color);
-  }
-
-  &__text {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--Spasing-2, 0.5rem);
-    flex: 1 0 0;
-
-    p {
-      color: var(--label-color);
-      text-box-trim: trim-both;
-      text-box-edge: cap alphabetic;
-      text-box: trim-both cap alphabetic;
-      margin: 0;
-      font-family: 'SF Pro Display';
-      font-size: 1rem;
-      font-style: normal;
-      font-weight: 500;
-      line-height: normal;
-    }
-
-    span {
-      color: var(--description-color);
-      text-box-trim: trim-both;
-      text-box-edge: cap alphabetic;
-      text-box: trim-both cap alphabetic;
-      margin: 0;
-      font-family: 'SF Pro Display';
-      font-size: 0.75rem;
-      font-style: normal;
-      font-weight: 400;
-      line-height: normal;
-      letter-spacing: 0.0125rem;
-    }
-  }
-
-  &__action {
-    display: flex;
-    width: 1.25rem;
-    height: 1.25rem;
-    padding: var(--spasing-fractional-05, 0.125rem);
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: var(--Spasing-0, 0);
-    flex-shrink: 0;
-    aspect-ratio: 1/1;
-
-    background: var(--action-icon-background);
-    border: var(--action-icon-border);
-    border-radius: var(--action-icon-radius);
-    color: var(--action-icon-color);
-
-    w2p-ui-icon-nav-arrow {
-      display: contents;
-      --w2p-ui-icon-size: 0.75rem;
-    }
-  }
-
-  &__action-icon {
-    display: contents;
-  }
-}

package/components/button/button.stories.ts

@@ -1,62 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { fn } from 'storybook/test';
-import { W2pButton } from './button';
-import { AddSquareIconComponent } from '@w2p-ui/icons';
-
-const meta: Meta<W2pButton> = {
-  title: 'Buttons/Navigation',
-  component: W2pButton,
-  tags: ['autodocs'],
-  argTypes: {},
-  args: { onClick: fn() },
-};
-
-export default meta;
-type Story = StoryObj<W2pButton>;
-
-export const Primary: Story = {
-  argTypes: {
-    disabled: { control: { type: 'boolean' }, name: 'Заблокировано' },
-    onClick: { name: 'Клик' },
-  },
-  args: {
-    disabled: false,
-  },
-
-  render: (args) => ({
-    props: args,
-    moduleMetadata: {
-      imports: [AddSquareIconComponent],
-    },
-    template: `
-    <w2p-button [disabled]="disabled" variant="primary" (onClick)="onClick()">
-      <w2p-ui-icon-add-square icon></w2p-ui-icon-add-square>
-      <ng-container label>Button Label</ng-container>
-      <ng-container description>Description</ng-container>
-    </w2p-button>
-  `,
-  }),
-};
-
-export const Neutral: Story = {
-  argTypes: {
-    disabled: { control: { type: 'boolean' }, name: 'Заблокировано' },
-    onClick: { name: 'Клик' },
-  },
-  args: {
-    disabled: false,
-  },
-  render: (args) => ({
-    props: args,
-    moduleMetadata: {
-      imports: [AddSquareIconComponent],
-    },
-    template: `
-    <w2p-button [disabled]="disabled" variant="neutral" (onClick)="onClick()">
-      <w2p-ui-icon-add-square icon></w2p-ui-icon-add-square>
-      <ng-container label>Button Label</ng-container>
-      <ng-container description>Description</ng-container>
-    </w2p-button>
-  `,
-  }),
-};

package/components/button/button.ts

@@ -1,18 +0,0 @@
-import { Component, computed, input, output } from '@angular/core';
-import { NavArrowIconComponent } from '@w2p-ui/icons';
-
-@Component({
-  selector: 'w2p-button',
-  imports: [NavArrowIconComponent],
-  templateUrl: './button.html',
-  styleUrls: ['./button.scss', './variants.scss'],
-})
-export class W2pButton {
-  public readonly onClick = output<void>();
-  public readonly variant = input<'primary' | 'neutral'>('primary');
-  public readonly disabled = input<boolean>(false);
-
-  protected readonly classes = computed((): string => {
-    return `button--${this.variant()}`;
-  });
-}

package/components/button/index.ts

@@ -1 +0,0 @@
-export * from './button';

package/components/button/ng-package.json

@@ -1,5 +0,0 @@
-{
-  "lib": {
-    "entryFile": "index.ts"
-  }
-}

package/components/button/variants.scss

@@ -1,147 +0,0 @@
-.button {
-  --action-icon-radius: var(--Border-radius-999, 62.4375rem);
-
-  &--primary {
-    --bg-color: var(--Brand-Primary-Default, #f3400d);
-    --label-color: var(--White-100, #fff);
-    --description-color: var(--Base-Inverse-80, rgba(255, 255, 255, 0.8));
-    --border-color: var(--Base-Inverse-5, rgba(255, 255, 255, 0.05));
-    --icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, 0.8));
-
-    --action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, 0.7));
-    --action-icon-radius: var(--Border-radius-999, 62.4375rem);
-    --action-icon-border: 0.5px solid var(--Base-Inverse-20, rgba(255, 255, 255, 0.2));
-    --action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, 0.2));
-
-    --separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, 0.2));
-
-    &:hover {
-      @media (hover: hover) {
-        --bg-color:
-          linear-gradient(
-            0deg,
-            var(--Brand-Primary-90, rgba(243, 64, 13, 0.9)) 0%,
-            var(--Brand-Primary-90, rgba(243, 64, 13, 0.9)) 100%
-          ),
-          var(--Base-Inverse-Default, #fff);
-        --icon-bg-color: var(--Base-Inverse-95, rgba(255, 255, 255, 0.95));
-        --action-icon-color: var(--Brand-Primary-90, rgba(243, 64, 13, 0.9));
-        --action-icon-border: 0.5px solid var(--Base-Inverse-20, rgba(255, 255, 255, 0.2));
-        --action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, 0.9));
-      }
-    }
-
-    &:active {
-      --bg-color:
-        linear-gradient(
-          0deg,
-          var(--Brand-Primary-70, rgba(243, 64, 13, 0.7)) 0%,
-          var(--Brand-Primary-70, rgba(243, 64, 13, 0.7)) 100%
-        ),
-        var(--Base-Base-Default, #0b0b0b);
-      --icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, 0.5));
-      --label-color: var(--Base-Inverse-50, rgba(255, 255, 255, 0.5));
-      --description-color: var(--Base-Inverse-30, rgba(255, 255, 255, 0.3));
-      --action-icon-color: var(--Brand-Primary-70, rgba(243, 64, 13, 0.7));
-      --action-icon-border: 0.5px solid var(--Base-Inverse-5, rgba(255, 255, 255, 0.05));
-      --action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, 0.5));
-    }
-
-    &:disabled {
-      --bg-color:
-        linear-gradient(
-          0deg,
-          var(--Brand-Primary-30, rgba(243, 64, 13, 0.3)) 0%,
-          var(--Brand-Primary-30, rgba(243, 64, 13, 0.3)) 100%
-        ),
-        var(--Base-Base-Default, #0b0b0b);
-      --icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, 0.4));
-      --label-color: var(--Base-Base-80, rgba(11, 11, 11, 0.8));
-      --description-color: var(--Base-Base-50, rgba(11, 11, 11, 0.5));
-      --action-icon-color: var(--Base-Base-40, rgba(11, 11, 11, 0.4));
-      --action-icon-border: none;
-      --action-icon-background: var(--Base-Base-30, rgba(11, 11, 11, 0.3));
-      --separator-color: var(--Base-Base-20, rgba(11, 11, 11, 0.2));
-    }
-  }
-
-  &--neutral {
-    --bg-color:
-      linear-gradient(
-        0deg,
-        var(--Base-Inverse-5, rgba(255, 255, 255, 0.05)) 0%,
-        var(--Base-Inverse-5, rgba(255, 255, 255, 0.05)) 100%
-      ),
-      var(--Base-Base-Default, #0b0b0b);
-    --border-color: var(--Base-Inverse-5, rgba(255, 255, 255, 0.05));
-
-    --label-color: var(--White-100, #fff);
-    --description-color: var(--Base-Inverse-60, rgba(255, 255, 255, 0.6));
-
-    --icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, 0.8));
-
-    --action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, 0.7));
-    --action-icon-border: 0.5px solid var(--Base-Inverse-20, rgba(255, 255, 255, 0.2));
-    --action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, 0.2));
-
-    --separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, 0.2));
-
-    &:hover {
-      @media (hover: hover) {
-        --bg-color:
-          linear-gradient(
-            0deg,
-            var(--Base-Inverse-10, rgba(255, 255, 255, 0.1)) 0%,
-            var(--Base-Inverse-10, rgba(255, 255, 255, 0.1)) 100%
-          ),
-          var(--Base-Base-Default, #0b0b0b);
-
-        --icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, 0.8));
-
-        --action-icon-color: var(--Base-Base-Default, #0b0b0b);
-        --action-icon-border: 0.5px solid var(--Base-Inverse-20, rgba(255, 255, 255, 0.2));
-        --action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, 0.9));
-
-        --separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, 0.2));
-      }
-    }
-
-    &:active {
-      --bg-color:
-        linear-gradient(
-          0deg,
-          var(--Base-Inverse-5, rgba(255, 255, 255, 0.05)) 0%,
-          var(--Base-Inverse-5, rgba(255, 255, 255, 0.05)) 100%
-        ),
-        var(--Base-Base-Default, #0b0b0b);
-
-      --icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, 0.5));
-
-      --label-color: var(--Base-Inverse-50, rgba(255, 255, 255, 0.5));
-      --description-color: var(--Base-Inverse-30, rgba(255, 255, 255, 0.3));
-
-      --action-icon-color: var(--Base-Base-Default, #0b0b0b) --action-icon-border: 0.5px solid
-        var(--Base-Inverse-5, rgba(255, 255, 255, 0.05));
-      --action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, 0.5));
-    }
-
-    &:disabled {
-      --bg-color:
-        linear-gradient(
-          0deg,
-          var(--Base-Inverse-5, rgba(255, 255, 255, 0.05)) 0%,
-          var(--Base-Inverse-5, rgba(255, 255, 255, 0.05)) 100%
-        ),
-        var(--Base-Base-Default, #0b0b0b);
-      --icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, 0.1));
-      --label-color: var(--Base-Inverse-10, rgba(255, 255, 255, 0.1));
-      --description-color: var(--Base-Inverse-10, rgba(255, 255, 255, 0.1));
-
-      --action-icon-color: var(--Base-Base-Default, #0b0b0b);
-      --action-icon-border: none;
-      --action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, 0.05));
-
-      --separator-color: var(--Base-Base-20, rgba(11, 11, 11, 0.2));
-    }
-  }
-}

package/components/index.ts

@@ -1 +0,0 @@
-export * from './button';

package/components/ng-package.json

@@ -1,5 +0,0 @@
-{
-  "lib": {
-    "entryFile": "index.ts"
-  }
-}

package/index.ts

@@ -1 +0,0 @@
-export * from './components';

package/ng-package.json

@@ -1,10 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "assets": ["styles"],
-  "allowedNonPeerDependencies": ["."],
-  "dest": "../../dist/kit",
-  "inlineStyleLanguage": "scss",
-  "lib": {
-    "entryFile": "index.ts"
-  }
-}

package/tsconfig.lib.json

@@ -1,13 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "types": []
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": ["**/*.stories.ts", "**/*.spec.ts"]
-}

package/tsconfig.lib.prod.json

@@ -1,11 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}