@kanso-protocol/row 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.
|
@@ -30,11 +30,11 @@ class KpRowComponent {
|
|
|
30
30
|
return c.join(' ');
|
|
31
31
|
}
|
|
32
32
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
33
|
-
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 });
|
|
33
|
+
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{box-sizing:border-box;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 });
|
|
34
34
|
}
|
|
35
35
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpRowComponent, decorators: [{
|
|
36
36
|
type: Component,
|
|
37
|
-
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"] }]
|
|
37
|
+
args: [{ selector: 'kp-row', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses' }, template: `<ng-content/>`, styles: [":host{box-sizing:border-box;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"] }]
|
|
38
38
|
}], propDecorators: { gap: [{
|
|
39
39
|
type: Input
|
|
40
40
|
}], align: [{
|
|
@@ -1 +1 @@
|
|
|
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 * <button kpButton appearance=\"ghost\">Cancel</button>\n * <button kpButton>Save</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;
|
|
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 * <button kpButton appearance=\"ghost\">Cancel</button>\n * <button kpButton>Save</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 box-sizing: border-box;\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;MAuCU,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,8LAjCf,CAAA,aAAA,CAAe,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,8oCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAiCd,cAAc,EAAA,UAAA,EAAA,CAAA;kBAtC1B,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,8oCAAA,CAAA,EAAA;;sBAkCxB;;sBACA;;sBACA;;sBACA;;;AC9EH;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kanso-protocol/row",
|
|
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 — row (pattern).",
|
|
11
11
|
"author": "GregNBlack",
|