@kanso-protocol/stack 3.0.2 → 4.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.
|
@@ -21,11 +21,11 @@ class KpStackComponent {
|
|
|
21
21
|
return `kp-stack kp-stack--gap-${this.gap} kp-stack--align-${this.align}`;
|
|
22
22
|
}
|
|
23
23
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
24
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: KpStackComponent, isStandalone: true, selector: "kp-stack", inputs: { gap: "gap", align: "align" }, host: { properties: { "class": "hostClasses" } }, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:var(--kp-stack-gap, 16px)}:host(.kp-stack--gap-none){--kp-stack-gap: 0}:host(.kp-stack--gap-2xs){--kp-stack-gap: var(--kp-spacing-2xs, 8px)}:host(.kp-stack--gap-xs){--kp-stack-gap: var(--kp-spacing-xs, 12px)}:host(.kp-stack--gap-sm){--kp-stack-gap: var(--kp-spacing-sm, 16px)}:host(.kp-stack--gap-md){--kp-stack-gap: var(--kp-spacing-md, 20px)}:host(.kp-stack--gap-lg){--kp-stack-gap: var(--kp-spacing-lg, 24px)}:host(.kp-stack--gap-xl){--kp-stack-gap: var(--kp-spacing-xl, 32px)}:host(.kp-stack--gap-2xl){--kp-stack-gap: var(--kp-spacing-2xl, 40px)}:host(.kp-stack--align-start){align-items:flex-start}:host(.kp-stack--align-center){align-items:center}:host(.kp-stack--align-end){align-items:flex-end}:host(.kp-stack--align-stretch){align-items:stretch}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
24
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: KpStackComponent, isStandalone: true, selector: "kp-stack", inputs: { gap: "gap", align: "align" }, host: { properties: { "class": "hostClasses" } }, ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--kp-stack-gap, 16px)}:host(.kp-stack--gap-none){--kp-stack-gap: 0}:host(.kp-stack--gap-2xs){--kp-stack-gap: var(--kp-spacing-2xs, 8px)}:host(.kp-stack--gap-xs){--kp-stack-gap: var(--kp-spacing-xs, 12px)}:host(.kp-stack--gap-sm){--kp-stack-gap: var(--kp-spacing-sm, 16px)}:host(.kp-stack--gap-md){--kp-stack-gap: var(--kp-spacing-md, 20px)}:host(.kp-stack--gap-lg){--kp-stack-gap: var(--kp-spacing-lg, 24px)}:host(.kp-stack--gap-xl){--kp-stack-gap: var(--kp-spacing-xl, 32px)}:host(.kp-stack--gap-2xl){--kp-stack-gap: var(--kp-spacing-2xl, 40px)}:host(.kp-stack--align-start){align-items:flex-start}:host(.kp-stack--align-center){align-items:center}:host(.kp-stack--align-end){align-items:flex-end}:host(.kp-stack--align-stretch){align-items:stretch}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
25
25
|
}
|
|
26
26
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpStackComponent, decorators: [{
|
|
27
27
|
type: Component,
|
|
28
|
-
args: [{ selector: 'kp-stack', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses' }, template: `<ng-content/>`, styles: [":host{display:flex;flex-direction:column;gap:var(--kp-stack-gap, 16px)}:host(.kp-stack--gap-none){--kp-stack-gap: 0}:host(.kp-stack--gap-2xs){--kp-stack-gap: var(--kp-spacing-2xs, 8px)}:host(.kp-stack--gap-xs){--kp-stack-gap: var(--kp-spacing-xs, 12px)}:host(.kp-stack--gap-sm){--kp-stack-gap: var(--kp-spacing-sm, 16px)}:host(.kp-stack--gap-md){--kp-stack-gap: var(--kp-spacing-md, 20px)}:host(.kp-stack--gap-lg){--kp-stack-gap: var(--kp-spacing-lg, 24px)}:host(.kp-stack--gap-xl){--kp-stack-gap: var(--kp-spacing-xl, 32px)}:host(.kp-stack--gap-2xl){--kp-stack-gap: var(--kp-spacing-2xl, 40px)}:host(.kp-stack--align-start){align-items:flex-start}:host(.kp-stack--align-center){align-items:center}:host(.kp-stack--align-end){align-items:flex-end}:host(.kp-stack--align-stretch){align-items:stretch}\n"] }]
|
|
28
|
+
args: [{ selector: 'kp-stack', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses' }, template: `<ng-content/>`, styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--kp-stack-gap, 16px)}:host(.kp-stack--gap-none){--kp-stack-gap: 0}:host(.kp-stack--gap-2xs){--kp-stack-gap: var(--kp-spacing-2xs, 8px)}:host(.kp-stack--gap-xs){--kp-stack-gap: var(--kp-spacing-xs, 12px)}:host(.kp-stack--gap-sm){--kp-stack-gap: var(--kp-spacing-sm, 16px)}:host(.kp-stack--gap-md){--kp-stack-gap: var(--kp-spacing-md, 20px)}:host(.kp-stack--gap-lg){--kp-stack-gap: var(--kp-spacing-lg, 24px)}:host(.kp-stack--gap-xl){--kp-stack-gap: var(--kp-spacing-xl, 32px)}:host(.kp-stack--gap-2xl){--kp-stack-gap: var(--kp-spacing-2xl, 40px)}:host(.kp-stack--align-start){align-items:flex-start}:host(.kp-stack--align-center){align-items:center}:host(.kp-stack--align-end){align-items:flex-end}:host(.kp-stack--align-stretch){align-items:stretch}\n"] }]
|
|
29
29
|
}], propDecorators: { gap: [{
|
|
30
30
|
type: Input
|
|
31
31
|
}], align: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kanso-protocol-stack.mjs","sources":["../../../../../packages/patterns/stack/src/stack.component.ts","../../../../../packages/patterns/stack/src/kanso-protocol-stack.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n Input,\n} from '@angular/core';\n\nexport type KpStackGap =\n | 'none'\n | '2xs'\n | 'xs'\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'\n | '2xl';\n\nexport type KpStackAlign = 'start' | 'center' | 'end' | 'stretch';\n\n/**\n * Kanso Protocol — Stack\n *\n * Vertical Auto Layout wrapper with a preset gap scale and cross-axis\n * alignment. Semantic counterpart to `<div style=\"display:flex;flex-direction:column\">`.\n *\n * @example\n * <kp-stack gap=\"md\">\n * <kp-input/>\n * <kp-input/>\n * <button kpButton>Save</button>\n * </kp-stack>\n */\n@Component({\n selector: 'kp-stack',\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses' },\n template: `<ng-content/>`,\n styles: [`\n :host {\n display: flex;\n flex-direction: column;\n gap: var(--kp-stack-gap, 16px);\n }\n\n :host(.kp-stack--gap-none) { --kp-stack-gap: 0; }\n :host(.kp-stack--gap-2xs) { --kp-stack-gap: var(--kp-spacing-2xs, 8px); }\n :host(.kp-stack--gap-xs) { --kp-stack-gap: var(--kp-spacing-xs, 12px); }\n :host(.kp-stack--gap-sm) { --kp-stack-gap: var(--kp-spacing-sm, 16px); }\n :host(.kp-stack--gap-md) { --kp-stack-gap: var(--kp-spacing-md, 20px); }\n :host(.kp-stack--gap-lg) { --kp-stack-gap: var(--kp-spacing-lg, 24px); }\n :host(.kp-stack--gap-xl) { --kp-stack-gap: var(--kp-spacing-xl, 32px); }\n :host(.kp-stack--gap-2xl) { --kp-stack-gap: var(--kp-spacing-2xl, 40px); }\n\n :host(.kp-stack--align-start) { align-items: flex-start; }\n :host(.kp-stack--align-center) { align-items: center; }\n :host(.kp-stack--align-end) { align-items: flex-end; }\n :host(.kp-stack--align-stretch) { align-items: stretch; }\n `],\n})\nexport class KpStackComponent {\n @Input() gap: KpStackGap = 'md';\n @Input() align: KpStackAlign = 'stretch';\n\n get hostClasses(): string {\n return `kp-stack kp-stack--gap-${this.gap} kp-stack--align-${this.align}`;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAkBA;;;;;;;;;;;;AAYG;
|
|
1
|
+
{"version":3,"file":"kanso-protocol-stack.mjs","sources":["../../../../../packages/patterns/stack/src/stack.component.ts","../../../../../packages/patterns/stack/src/kanso-protocol-stack.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n Input,\n} from '@angular/core';\n\nexport type KpStackGap =\n | 'none'\n | '2xs'\n | 'xs'\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'\n | '2xl';\n\nexport type KpStackAlign = 'start' | 'center' | 'end' | 'stretch';\n\n/**\n * Kanso Protocol — Stack\n *\n * Vertical Auto Layout wrapper with a preset gap scale and cross-axis\n * alignment. Semantic counterpart to `<div style=\"display:flex;flex-direction:column\">`.\n *\n * @example\n * <kp-stack gap=\"md\">\n * <kp-input/>\n * <kp-input/>\n * <button kpButton>Save</button>\n * </kp-stack>\n */\n@Component({\n selector: 'kp-stack',\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: column;\n gap: var(--kp-stack-gap, 16px);\n }\n\n :host(.kp-stack--gap-none) { --kp-stack-gap: 0; }\n :host(.kp-stack--gap-2xs) { --kp-stack-gap: var(--kp-spacing-2xs, 8px); }\n :host(.kp-stack--gap-xs) { --kp-stack-gap: var(--kp-spacing-xs, 12px); }\n :host(.kp-stack--gap-sm) { --kp-stack-gap: var(--kp-spacing-sm, 16px); }\n :host(.kp-stack--gap-md) { --kp-stack-gap: var(--kp-spacing-md, 20px); }\n :host(.kp-stack--gap-lg) { --kp-stack-gap: var(--kp-spacing-lg, 24px); }\n :host(.kp-stack--gap-xl) { --kp-stack-gap: var(--kp-spacing-xl, 32px); }\n :host(.kp-stack--gap-2xl) { --kp-stack-gap: var(--kp-spacing-2xl, 40px); }\n\n :host(.kp-stack--align-start) { align-items: flex-start; }\n :host(.kp-stack--align-center) { align-items: center; }\n :host(.kp-stack--align-end) { align-items: flex-end; }\n :host(.kp-stack--align-stretch) { align-items: stretch; }\n `],\n})\nexport class KpStackComponent {\n @Input() gap: KpStackGap = 'md';\n @Input() align: KpStackAlign = 'stretch';\n\n get hostClasses(): string {\n return `kp-stack kp-stack--gap-${this.gap} kp-stack--align-${this.align}`;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAkBA;;;;;;;;;;;;AAYG;MA8BU,gBAAgB,CAAA;IAClB,GAAG,GAAe,IAAI;IACtB,KAAK,GAAiB,SAAS;AAExC,IAAA,IAAI,WAAW,GAAA;QACb,OAAO,CAAA,uBAAA,EAA0B,IAAI,CAAC,GAAG,oBAAoB,IAAI,CAAC,KAAK,CAAA,CAAE;IAC3E;uGANW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,8JAxBjB,CAAA,aAAA,CAAe,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,yzBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAwBd,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBA7B5B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EAAA,OAAA,EACX,EAAE,EAAA,eAAA,EACM,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC,EAAE,SAAS,EAAE,aAAa,EAAE,YACxB,CAAA,aAAA,CAAe,EAAA,MAAA,EAAA,CAAA,yzBAAA,CAAA,EAAA;;sBAyBxB;;sBACA;;;AC9DH;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kanso-protocol/stack",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.1.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 — stack (pattern).",
|
|
11
11
|
"author": "GregNBlack",
|