@kanso-protocol/grid 3.0.1 → 4.0.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.
|
@@ -29,11 +29,11 @@ class KpGridComponent {
|
|
|
29
29
|
return c.join(' ');
|
|
30
30
|
}
|
|
31
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 });
|
|
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{box-sizing:border-box;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
33
|
}
|
|
34
34
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpGridComponent, decorators: [{
|
|
35
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"] }]
|
|
36
|
+
args: [{ selector: 'kp-grid', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses' }, template: `<ng-content/>`, styles: [":host{box-sizing:border-box;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
37
|
}], propDecorators: { columns: [{
|
|
38
38
|
type: Input
|
|
39
39
|
}], gap: [{
|
|
@@ -1 +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;
|
|
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 box-sizing: border-box;\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;MAmCU,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,mLA7BhB,CAAA,aAAA,CAAe,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0mCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FA6Bd,eAAe,EAAA,UAAA,EAAA,CAAA;kBAlC3B,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,0mCAAA,CAAA,EAAA;;sBA8BxB;;sBACA;;sBAEA;;;AC3DH;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kanso-protocol/grid",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"peerDependencies": {
|
|
6
6
|
"@angular/core": ">=21.0.0",
|
|
7
7
|
"@angular/common": ">=21.0.0",
|
|
8
|
-
"@kanso-protocol/core": ">=
|
|
8
|
+
"@kanso-protocol/core": ">=4.0.0"
|
|
9
9
|
},
|
|
10
10
|
"description": "Kanso Protocol — grid (pattern).",
|
|
11
11
|
"author": "GregNBlack",
|