@kanso-protocol/grid 0.1.0

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.
Files changed (4) hide show
  1. package/fesm2022/kanso-protocol-grid.mjs +50 -0
  2. package/fesm2022/kanso-protocol-grid.mjs.map +1 -0
  3. package/package.json +41 -0
  4. package/types/kanso-protocol-grid.d.ts +28 -0
package/fesm2022/kanso-protocol-grid.mjs ADDED
@@ -0,0 +1,50 @@
1
+ import * as i0 from '@angular/core';
2
+ import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
3
+
4
+ /**
5
+ * Kanso Protocol — Grid
6
+ *
7
+ * Responsive `display: grid` wrapper. Equal-width columns, preset
8
+ * gap scale. Independent row-gap via `gapRow` when columns need
9
+ * tighter vertical rhythm than horizontal.
10
+ *
11
+ * @example
12
+ * <kp-grid [columns]="3" gap="md">
13
+ * <kp-card/><kp-card/><kp-card/>
14
+ * </kp-grid>
15
+ */
16
+ class KpGridComponent {
17
+ columns = 3;
18
+ gap = 'md';
19
+ /** Optional independent row gap; if null, matches `gap`. */
20
+ gapRow = null;
21
+ get hostClasses() {
22
+ const c = [
23
+ 'kp-grid',
24
+ `kp-grid--cols-${this.columns}`,
25
+ `kp-grid--gap-${this.gap}`,
26
+ ];
27
+ if (this.gapRow)
28
+ c.push(`kp-grid--rgap-${this.gapRow}`);
29
+ return c.join(' ');
30
+ }
31
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
32
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: KpGridComponent, isStandalone: true, selector: "kp-grid", inputs: { columns: "columns", gap: "gap", gapRow: "gapRow" }, host: { properties: { "class": "hostClasses" } }, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:grid;grid-template-columns:repeat(var(--kp-grid-cols, 3),minmax(0,1fr));column-gap:var(--kp-grid-col-gap, 16px);row-gap:var(--kp-grid-row-gap, var(--kp-grid-col-gap, 16px))}:host(.kp-grid--cols-2){--kp-grid-cols: 2}:host(.kp-grid--cols-3){--kp-grid-cols: 3}:host(.kp-grid--cols-4){--kp-grid-cols: 4}:host(.kp-grid--cols-6){--kp-grid-cols: 6}:host(.kp-grid--cols-12){--kp-grid-cols: 12}:host(.kp-grid--gap-xs){--kp-grid-col-gap: var(--kp-spacing-xs, 12px)}:host(.kp-grid--gap-sm){--kp-grid-col-gap: var(--kp-spacing-sm, 16px)}:host(.kp-grid--gap-md){--kp-grid-col-gap: var(--kp-spacing-md, 20px)}:host(.kp-grid--gap-lg){--kp-grid-col-gap: var(--kp-spacing-lg, 24px)}:host(.kp-grid--gap-xl){--kp-grid-col-gap: var(--kp-spacing-xl, 32px)}:host(.kp-grid--rgap-xs){--kp-grid-row-gap: var(--kp-spacing-xs, 12px)}:host(.kp-grid--rgap-sm){--kp-grid-row-gap: var(--kp-spacing-sm, 16px)}:host(.kp-grid--rgap-md){--kp-grid-row-gap: var(--kp-spacing-md, 20px)}:host(.kp-grid--rgap-lg){--kp-grid-row-gap: var(--kp-spacing-lg, 24px)}:host(.kp-grid--rgap-xl){--kp-grid-row-gap: var(--kp-spacing-xl, 32px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
33
+ }
34
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpGridComponent, decorators: [{
35
+ type: Component,
36
+ args: [{ selector: 'kp-grid', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses' }, template: `<ng-content/>`, styles: [":host{display:grid;grid-template-columns:repeat(var(--kp-grid-cols, 3),minmax(0,1fr));column-gap:var(--kp-grid-col-gap, 16px);row-gap:var(--kp-grid-row-gap, var(--kp-grid-col-gap, 16px))}:host(.kp-grid--cols-2){--kp-grid-cols: 2}:host(.kp-grid--cols-3){--kp-grid-cols: 3}:host(.kp-grid--cols-4){--kp-grid-cols: 4}:host(.kp-grid--cols-6){--kp-grid-cols: 6}:host(.kp-grid--cols-12){--kp-grid-cols: 12}:host(.kp-grid--gap-xs){--kp-grid-col-gap: var(--kp-spacing-xs, 12px)}:host(.kp-grid--gap-sm){--kp-grid-col-gap: var(--kp-spacing-sm, 16px)}:host(.kp-grid--gap-md){--kp-grid-col-gap: var(--kp-spacing-md, 20px)}:host(.kp-grid--gap-lg){--kp-grid-col-gap: var(--kp-spacing-lg, 24px)}:host(.kp-grid--gap-xl){--kp-grid-col-gap: var(--kp-spacing-xl, 32px)}:host(.kp-grid--rgap-xs){--kp-grid-row-gap: var(--kp-spacing-xs, 12px)}:host(.kp-grid--rgap-sm){--kp-grid-row-gap: var(--kp-spacing-sm, 16px)}:host(.kp-grid--rgap-md){--kp-grid-row-gap: var(--kp-spacing-md, 20px)}:host(.kp-grid--rgap-lg){--kp-grid-row-gap: var(--kp-spacing-lg, 24px)}:host(.kp-grid--rgap-xl){--kp-grid-row-gap: var(--kp-spacing-xl, 32px)}\n"] }]
37
+ }], propDecorators: { columns: [{
38
+ type: Input
39
+ }], gap: [{
40
+ type: Input
41
+ }], gapRow: [{
42
+ type: Input
43
+ }] } });
44
+
45
+ /**
46
+ * Generated bundle index. Do not edit.
47
+ */
48
+
49
+ export { KpGridComponent };
50
+ //# sourceMappingURL=kanso-protocol-grid.mjs.map
package/fesm2022/kanso-protocol-grid.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"kanso-protocol-grid.mjs","sources":["../../../../../packages/patterns/grid/src/grid.component.ts","../../../../../packages/patterns/grid/src/kanso-protocol-grid.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n Input,\n} from '@angular/core';\n\nexport type KpGridColumns = 2 | 3 | 4 | 6 | 12;\nexport type KpGridGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Kanso Protocol — Grid\n *\n * Responsive `display: grid` wrapper. Equal-width columns, preset\n * gap scale. Independent row-gap via `gapRow` when columns need\n * tighter vertical rhythm than horizontal.\n *\n * @example\n * <kp-grid [columns]=\"3\" gap=\"md\">\n * <kp-card/><kp-card/><kp-card/>\n * </kp-grid>\n */\n@Component({\n selector: 'kp-grid',\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses' },\n template: `<ng-content/>`,\n styles: [`\n :host {\n display: grid;\n grid-template-columns: repeat(var(--kp-grid-cols, 3), minmax(0, 1fr));\n column-gap: var(--kp-grid-col-gap, 16px);\n row-gap: var(--kp-grid-row-gap, var(--kp-grid-col-gap, 16px));\n }\n\n :host(.kp-grid--cols-2) { --kp-grid-cols: 2; }\n :host(.kp-grid--cols-3) { --kp-grid-cols: 3; }\n :host(.kp-grid--cols-4) { --kp-grid-cols: 4; }\n :host(.kp-grid--cols-6) { --kp-grid-cols: 6; }\n :host(.kp-grid--cols-12) { --kp-grid-cols: 12; }\n\n :host(.kp-grid--gap-xs) { --kp-grid-col-gap: var(--kp-spacing-xs, 12px); }\n :host(.kp-grid--gap-sm) { --kp-grid-col-gap: var(--kp-spacing-sm, 16px); }\n :host(.kp-grid--gap-md) { --kp-grid-col-gap: var(--kp-spacing-md, 20px); }\n :host(.kp-grid--gap-lg) { --kp-grid-col-gap: var(--kp-spacing-lg, 24px); }\n :host(.kp-grid--gap-xl) { --kp-grid-col-gap: var(--kp-spacing-xl, 32px); }\n\n :host(.kp-grid--rgap-xs) { --kp-grid-row-gap: var(--kp-spacing-xs, 12px); }\n :host(.kp-grid--rgap-sm) { --kp-grid-row-gap: var(--kp-spacing-sm, 16px); }\n :host(.kp-grid--rgap-md) { --kp-grid-row-gap: var(--kp-spacing-md, 20px); }\n :host(.kp-grid--rgap-lg) { --kp-grid-row-gap: var(--kp-spacing-lg, 24px); }\n :host(.kp-grid--rgap-xl) { --kp-grid-row-gap: var(--kp-spacing-xl, 32px); }\n `],\n})\nexport class KpGridComponent {\n @Input() columns: KpGridColumns = 3;\n @Input() gap: KpGridGap = 'md';\n /** Optional independent row gap; if null, matches `gap`. */\n @Input() gapRow: KpGridGap | null = null;\n\n get hostClasses(): string {\n const c = [\n 'kp-grid',\n `kp-grid--cols-${this.columns}`,\n `kp-grid--gap-${this.gap}`,\n ];\n if (this.gapRow) c.push(`kp-grid--rgap-${this.gapRow}`);\n return c.join(' ');\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AASA;;;;;;;;;;;AAWG;MAkCU,eAAe,CAAA;IACjB,OAAO,GAAkB,CAAC;IAC1B,GAAG,GAAc,IAAI;;IAErB,MAAM,GAAqB,IAAI;AAExC,IAAA,IAAI,WAAW,GAAA;AACb,QAAA,MAAM,CAAC,GAAG;YACR,SAAS;YACT,CAAA,cAAA,EAAiB,IAAI,CAAC,OAAO,CAAA,CAAE;YAC/B,CAAA,aAAA,EAAgB,IAAI,CAAC,GAAG,CAAA,CAAE;SAC3B;QACD,IAAI,IAAI,CAAC,MAAM;YAAE,CAAC,CAAC,IAAI,CAAC,CAAA,cAAA,EAAiB,IAAI,CAAC,MAAM,CAAA,CAAE,CAAC;AACvD,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;IACpB;uGAdW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,mLA5BhB,CAAA,aAAA,CAAe,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,olCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FA4Bd,eAAe,EAAA,UAAA,EAAA,CAAA;kBAjC3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,EAAA,OAAA,EACV,EAAE,EAAA,eAAA,EACM,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC,EAAE,SAAS,EAAE,aAAa,EAAE,YACxB,CAAA,aAAA,CAAe,EAAA,MAAA,EAAA,CAAA,olCAAA,CAAA,EAAA;;sBA6BxB;;sBACA;;sBAEA;;;AC1DH;;AAEG;;;;"}
package/package.json ADDED
@@ -0,0 +1,41 @@
1
+ {
2
+ "name": "@kanso-protocol/grid",
3
+ "version": "0.1.0",
4
+ "license": "MIT",
5
+ "peerDependencies": {
6
+ "@angular/core": "^18.0.0",
7
+ "@angular/common": "^18.0.0",
8
+ "@kanso-protocol/core": "^0.0.1"
9
+ },
10
+ "description": "Kanso Protocol — grid (pattern).",
11
+ "author": "GregNBlack",
12
+ "repository": {
13
+ "type": "git",
14
+ "url": "https://github.com/GregNBlack/kanso-protocol.git",
15
+ "directory": "packages/patterns/grid"
16
+ },
17
+ "homepage": "https://gregnblack.github.io/kanso-protocol/?path=/docs/patterns-grid--docs",
18
+ "bugs": "https://github.com/GregNBlack/kanso-protocol/issues",
19
+ "keywords": [
20
+ "design-system",
21
+ "angular",
22
+ "kanso",
23
+ "grid"
24
+ ],
25
+ "sideEffects": false,
26
+ "module": "fesm2022/kanso-protocol-grid.mjs",
27
+ "typings": "types/kanso-protocol-grid.d.ts",
28
+ "exports": {
29
+ "./package.json": {
30
+ "default": "./package.json"
31
+ },
32
+ ".": {
33
+ "types": "./types/kanso-protocol-grid.d.ts",
34
+ "default": "./fesm2022/kanso-protocol-grid.mjs"
35
+ }
36
+ },
37
+ "type": "module",
38
+ "dependencies": {
39
+ "tslib": "^2.3.0"
40
+ }
41
+ }
package/types/kanso-protocol-grid.d.ts ADDED
@@ -0,0 +1,28 @@
1
+ import * as i0 from '@angular/core';
2
+
3
+ type KpGridColumns = 2 | 3 | 4 | 6 | 12;
4
+ type KpGridGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
5
+ /**
6
+ * Kanso Protocol — Grid
7
+ *
8
+ * Responsive `display: grid` wrapper. Equal-width columns, preset
9
+ * gap scale. Independent row-gap via `gapRow` when columns need
10
+ * tighter vertical rhythm than horizontal.
11
+ *
12
+ * @example
13
+ * <kp-grid [columns]="3" gap="md">
14
+ * <kp-card/><kp-card/><kp-card/>
15
+ * </kp-grid>
16
+ */
17
+ declare class KpGridComponent {
18
+ columns: KpGridColumns;
19
+ gap: KpGridGap;
20
+ /** Optional independent row gap; if null, matches `gap`. */
21
+ gapRow: KpGridGap | null;
22
+ get hostClasses(): string;
23
+ static ɵfac: i0.ɵɵFactoryDeclaration<KpGridComponent, never>;
24
+ static ɵcmp: i0.ɵɵComponentDeclaration<KpGridComponent, "kp-grid", never, { "columns": { "alias": "columns"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "gapRow": { "alias": "gapRow"; "required": false; }; }, {}, never, ["*"], true, never>;
25
+ }
26
+
27
+ export { KpGridComponent };
28
+ export type { KpGridColumns, KpGridGap };