@kanso-protocol/row 0.1.0

package/fesm2022/kanso-protocol-row.mjs

@@ -0,0 +1,53 @@
+import * as i0 from '@angular/core';
+import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * Kanso Protocol — Row
+ *
+ * Horizontal Auto Layout wrapper with a preset gap scale, cross-axis
+ * alignment, and main-axis justification. Optional wrap on overflow.
+ *
+ * @example
+ * <kp-row gap="sm" justify="end">
+ *   <kp-button appearance="ghost">Cancel</kp-button>
+ *   <kp-button>Save</kp-button>
+ * </kp-row>
+ */
+class KpRowComponent {
+    gap = 'md';
+    align = 'center';
+    justify = 'start';
+    wrap = false;
+    get hostClasses() {
+        const c = [
+            'kp-row',
+            `kp-row--gap-${this.gap}`,
+            `kp-row--align-${this.align}`,
+            `kp-row--justify-${this.justify}`,
+        ];
+        if (this.wrap)
+            c.push('kp-row--wrap');
+        return c.join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: KpRowComponent, isStandalone: true, selector: "kp-row", inputs: { gap: "gap", align: "align", justify: "justify", wrap: "wrap" }, host: { properties: { "class": "hostClasses" } }, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:flex;flex-direction:row;gap:var(--kp-row-gap, 16px)}:host(.kp-row--gap-none){--kp-row-gap: 0}:host(.kp-row--gap-2xs){--kp-row-gap: var(--kp-spacing-2xs, 8px)}:host(.kp-row--gap-xs){--kp-row-gap: var(--kp-spacing-xs, 12px)}:host(.kp-row--gap-sm){--kp-row-gap: var(--kp-spacing-sm, 16px)}:host(.kp-row--gap-md){--kp-row-gap: var(--kp-spacing-md, 20px)}:host(.kp-row--gap-lg){--kp-row-gap: var(--kp-spacing-lg, 24px)}:host(.kp-row--gap-xl){--kp-row-gap: var(--kp-spacing-xl, 32px)}:host(.kp-row--gap-2xl){--kp-row-gap: var(--kp-spacing-2xl, 40px)}:host(.kp-row--align-start){align-items:flex-start}:host(.kp-row--align-center){align-items:center}:host(.kp-row--align-end){align-items:flex-end}:host(.kp-row--align-stretch){align-items:stretch}:host(.kp-row--align-baseline){align-items:baseline}:host(.kp-row--justify-start){justify-content:flex-start}:host(.kp-row--justify-center){justify-content:center}:host(.kp-row--justify-end){justify-content:flex-end}:host(.kp-row--justify-space-between){justify-content:space-between}:host(.kp-row--justify-space-around){justify-content:space-around}:host(.kp-row--wrap){flex-wrap:wrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kp-row', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses' }, template: `<ng-content/>`, styles: [":host{display:flex;flex-direction:row;gap:var(--kp-row-gap, 16px)}:host(.kp-row--gap-none){--kp-row-gap: 0}:host(.kp-row--gap-2xs){--kp-row-gap: var(--kp-spacing-2xs, 8px)}:host(.kp-row--gap-xs){--kp-row-gap: var(--kp-spacing-xs, 12px)}:host(.kp-row--gap-sm){--kp-row-gap: var(--kp-spacing-sm, 16px)}:host(.kp-row--gap-md){--kp-row-gap: var(--kp-spacing-md, 20px)}:host(.kp-row--gap-lg){--kp-row-gap: var(--kp-spacing-lg, 24px)}:host(.kp-row--gap-xl){--kp-row-gap: var(--kp-spacing-xl, 32px)}:host(.kp-row--gap-2xl){--kp-row-gap: var(--kp-spacing-2xl, 40px)}:host(.kp-row--align-start){align-items:flex-start}:host(.kp-row--align-center){align-items:center}:host(.kp-row--align-end){align-items:flex-end}:host(.kp-row--align-stretch){align-items:stretch}:host(.kp-row--align-baseline){align-items:baseline}:host(.kp-row--justify-start){justify-content:flex-start}:host(.kp-row--justify-center){justify-content:center}:host(.kp-row--justify-end){justify-content:flex-end}:host(.kp-row--justify-space-between){justify-content:space-between}:host(.kp-row--justify-space-around){justify-content:space-around}:host(.kp-row--wrap){flex-wrap:wrap}\n"] }]
+        }], propDecorators: { gap: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], justify: [{
+                type: Input
+            }], wrap: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KpRowComponent };
+//# sourceMappingURL=kanso-protocol-row.mjs.map

package/fesm2022/kanso-protocol-row.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"kanso-protocol-row.mjs","sources":["../../../../../packages/patterns/row/src/row.component.ts","../../../../../packages/patterns/row/src/kanso-protocol-row.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  Input,\n} from '@angular/core';\n\nexport type KpRowGap =\n  | 'none'\n  | '2xs'\n  | 'xs'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | '2xl';\n\nexport type KpRowAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\nexport type KpRowJustify =\n  | 'start'\n  | 'center'\n  | 'end'\n  | 'space-between'\n  | 'space-around';\n\n/**\n * Kanso Protocol — Row\n *\n * Horizontal Auto Layout wrapper with a preset gap scale, cross-axis\n * alignment, and main-axis justification. Optional wrap on overflow.\n *\n * @example\n * <kp-row gap=\"sm\" justify=\"end\">\n *   <kp-button appearance=\"ghost\">Cancel</kp-button>\n *   <kp-button>Save</kp-button>\n * </kp-row>\n */\n@Component({\n  selector: 'kp-row',\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { '[class]': 'hostClasses' },\n  template: `<ng-content/>`,\n  styles: [`\n    :host {\n      display: flex;\n      flex-direction: row;\n      gap: var(--kp-row-gap, 16px);\n    }\n\n    :host(.kp-row--gap-none) { --kp-row-gap: 0; }\n    :host(.kp-row--gap-2xs)  { --kp-row-gap: var(--kp-spacing-2xs, 8px); }\n    :host(.kp-row--gap-xs)   { --kp-row-gap: var(--kp-spacing-xs, 12px); }\n    :host(.kp-row--gap-sm)   { --kp-row-gap: var(--kp-spacing-sm, 16px); }\n    :host(.kp-row--gap-md)   { --kp-row-gap: var(--kp-spacing-md, 20px); }\n    :host(.kp-row--gap-lg)   { --kp-row-gap: var(--kp-spacing-lg, 24px); }\n    :host(.kp-row--gap-xl)   { --kp-row-gap: var(--kp-spacing-xl, 32px); }\n    :host(.kp-row--gap-2xl)  { --kp-row-gap: var(--kp-spacing-2xl, 40px); }\n\n    :host(.kp-row--align-start)    { align-items: flex-start; }\n    :host(.kp-row--align-center)   { align-items: center; }\n    :host(.kp-row--align-end)      { align-items: flex-end; }\n    :host(.kp-row--align-stretch)  { align-items: stretch; }\n    :host(.kp-row--align-baseline) { align-items: baseline; }\n\n    :host(.kp-row--justify-start)         { justify-content: flex-start; }\n    :host(.kp-row--justify-center)        { justify-content: center; }\n    :host(.kp-row--justify-end)           { justify-content: flex-end; }\n    :host(.kp-row--justify-space-between) { justify-content: space-between; }\n    :host(.kp-row--justify-space-around)  { justify-content: space-around; }\n\n    :host(.kp-row--wrap) { flex-wrap: wrap; }\n  `],\n})\nexport class KpRowComponent {\n  @Input() gap: KpRowGap = 'md';\n  @Input() align: KpRowAlign = 'center';\n  @Input() justify: KpRowJustify = 'start';\n  @Input() wrap = false;\n\n  get hostClasses(): string {\n    const c = [\n      'kp-row',\n      `kp-row--gap-${this.gap}`,\n      `kp-row--align-${this.align}`,\n      `kp-row--justify-${this.justify}`,\n    ];\n    if (this.wrap) c.push('kp-row--wrap');\n    return c.join(' ');\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAwBA;;;;;;;;;;;AAWG;MAsCU,cAAc,CAAA;IAChB,GAAG,GAAa,IAAI;IACpB,KAAK,GAAe,QAAQ;IAC5B,OAAO,GAAiB,OAAO;IAC/B,IAAI,GAAG,KAAK;AAErB,IAAA,IAAI,WAAW,GAAA;AACb,QAAA,MAAM,CAAC,GAAG;YACR,QAAQ;YACR,CAAA,YAAA,EAAe,IAAI,CAAC,GAAG,CAAA,CAAE;YACzB,CAAA,cAAA,EAAiB,IAAI,CAAC,KAAK,CAAA,CAAE;YAC7B,CAAA,gBAAA,EAAmB,IAAI,CAAC,OAAO,CAAA,CAAE;SAClC;QACD,IAAI,IAAI,CAAC,IAAI;AAAE,YAAA,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC;AACrC,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;IACpB;uGAfW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,8LAhCf,CAAA,aAAA,CAAe,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,wnCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAgCd,cAAc,EAAA,UAAA,EAAA,CAAA;kBArC1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,QAAQ,EAAA,OAAA,EACT,EAAE,EAAA,eAAA,EACM,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC,EAAE,SAAS,EAAE,aAAa,EAAE,YACxB,CAAA,aAAA,CAAe,EAAA,MAAA,EAAA,CAAA,wnCAAA,CAAA,EAAA;;sBAiCxB;;sBACA;;sBACA;;sBACA;;;AC7EH;;AAEG;;;;"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@kanso-protocol/row",
+  "version": "0.1.0",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/core": "^18.0.0",
+    "@angular/common": "^18.0.0",
+    "@kanso-protocol/core": "^0.0.1"
+  },
+  "description": "Kanso Protocol — row (pattern).",
+  "author": "GregNBlack",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GregNBlack/kanso-protocol.git",
+    "directory": "packages/patterns/row"
+  },
+  "homepage": "https://gregnblack.github.io/kanso-protocol/?path=/docs/patterns-row--docs",
+  "bugs": "https://github.com/GregNBlack/kanso-protocol/issues",
+  "keywords": [
+    "design-system",
+    "angular",
+    "kanso",
+    "row"
+  ],
+  "sideEffects": false,
+  "module": "fesm2022/kanso-protocol-row.mjs",
+  "typings": "types/kanso-protocol-row.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/kanso-protocol-row.d.ts",
+      "default": "./fesm2022/kanso-protocol-row.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/kanso-protocol-row.d.ts

@@ -0,0 +1,29 @@
+import * as i0 from '@angular/core';
+
+type KpRowGap = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type KpRowAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type KpRowJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around';
+/**
+ * Kanso Protocol — Row
+ *
+ * Horizontal Auto Layout wrapper with a preset gap scale, cross-axis
+ * alignment, and main-axis justification. Optional wrap on overflow.
+ *
+ * @example
+ * <kp-row gap="sm" justify="end">
+ *   <kp-button appearance="ghost">Cancel</kp-button>
+ *   <kp-button>Save</kp-button>
+ * </kp-row>
+ */
+declare class KpRowComponent {
+    gap: KpRowGap;
+    align: KpRowAlign;
+    justify: KpRowJustify;
+    wrap: boolean;
+    get hostClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KpRowComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KpRowComponent, "kp-row", never, { "gap": { "alias": "gap"; "required": false; }; "align": { "alias": "align"; "required": false; }; "justify": { "alias": "justify"; "required": false; }; "wrap": { "alias": "wrap"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+export { KpRowComponent };
+export type { KpRowAlign, KpRowGap, KpRowJustify };