@kanso-protocol/form-section 0.1.0 → 0.5.2
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.
|
@@ -52,7 +52,7 @@ class KpFormSectionComponent {
|
|
|
52
52
|
@if (showDivider) {
|
|
53
53
|
<kp-divider class="kp-fs__divider" orientation="horizontal"/>
|
|
54
54
|
}
|
|
55
|
-
`, isInline: true, styles: [":host{box-sizing:border-box;display:block;width:100%;font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif);color:var(--kp-color-
|
|
55
|
+
`, isInline: true, styles: [":host{box-sizing:border-box;display:block;width:100%;font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif);color:var(--kp-color-text-strong)}.kp-fs__body{display:flex;gap:var(--kp-fs-gap, 32px);align-items:flex-start}:host(.kp-fs--inline) .kp-fs__body{flex-direction:row}:host(.kp-fs--stacked) .kp-fs__body{flex-direction:column;gap:24px}:host(.kp-fs--sm){--kp-fs-gap: 24px;--kp-fs-title: 16px;--kp-fs-desc: 13px}:host(.kp-fs--md){--kp-fs-gap: 32px;--kp-fs-title: 18px;--kp-fs-desc: 13px}:host(.kp-fs--lg){--kp-fs-gap: 40px;--kp-fs-title: 20px;--kp-fs-desc: 14px}.kp-fs__header{flex:0 0 auto;width:320px;max-width:100%}:host(.kp-fs--stacked) .kp-fs__header{width:100%}.kp-fs__title{margin:0;font-size:var(--kp-fs-title, 18px);font-weight:500;line-height:1.3;color:var(--kp-color-text-strong)}.kp-fs__description{margin:4px 0 0;font-size:var(--kp-fs-desc, 13px);line-height:1.45;color:var(--kp-color-text-muted)}.kp-fs__fields{flex:1 1 auto;min-width:0;max-width:640px;display:flex;flex-direction:column;gap:16px}:host(.kp-fs--stacked) .kp-fs__fields{max-width:100%;width:100%}.kp-fs__divider{display:block;margin-top:24px}\n"], dependencies: [{ kind: "component", type: KpDividerComponent, selector: "kp-divider", inputs: ["orientation", "label", "labelPosition", "hasProjected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
56
56
|
}
|
|
57
57
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpFormSectionComponent, decorators: [{
|
|
58
58
|
type: Component,
|
|
@@ -73,7 +73,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
73
73
|
@if (showDivider) {
|
|
74
74
|
<kp-divider class="kp-fs__divider" orientation="horizontal"/>
|
|
75
75
|
}
|
|
76
|
-
`, styles: [":host{box-sizing:border-box;display:block;width:100%;font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif);color:var(--kp-color-
|
|
76
|
+
`, styles: [":host{box-sizing:border-box;display:block;width:100%;font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif);color:var(--kp-color-text-strong)}.kp-fs__body{display:flex;gap:var(--kp-fs-gap, 32px);align-items:flex-start}:host(.kp-fs--inline) .kp-fs__body{flex-direction:row}:host(.kp-fs--stacked) .kp-fs__body{flex-direction:column;gap:24px}:host(.kp-fs--sm){--kp-fs-gap: 24px;--kp-fs-title: 16px;--kp-fs-desc: 13px}:host(.kp-fs--md){--kp-fs-gap: 32px;--kp-fs-title: 18px;--kp-fs-desc: 13px}:host(.kp-fs--lg){--kp-fs-gap: 40px;--kp-fs-title: 20px;--kp-fs-desc: 14px}.kp-fs__header{flex:0 0 auto;width:320px;max-width:100%}:host(.kp-fs--stacked) .kp-fs__header{width:100%}.kp-fs__title{margin:0;font-size:var(--kp-fs-title, 18px);font-weight:500;line-height:1.3;color:var(--kp-color-text-strong)}.kp-fs__description{margin:4px 0 0;font-size:var(--kp-fs-desc, 13px);line-height:1.45;color:var(--kp-color-text-muted)}.kp-fs__fields{flex:1 1 auto;min-width:0;max-width:640px;display:flex;flex-direction:column;gap:16px}:host(.kp-fs--stacked) .kp-fs__fields{max-width:100%;width:100%}.kp-fs__divider{display:block;margin-top:24px}\n"] }]
|
|
77
77
|
}], propDecorators: { layout: [{
|
|
78
78
|
type: Input
|
|
79
79
|
}], size: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kanso-protocol-form-section.mjs","sources":["../../../../../packages/patterns/form-section/src/form-section.component.ts","../../../../../packages/patterns/form-section/src/kanso-protocol-form-section.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n Input,\n} from '@angular/core';\nimport { KpDividerComponent } from '@kanso-protocol/divider';\n\nexport type KpFormSectionLayout = 'inline' | 'stacked';\nexport type KpFormSectionSize = 'sm' | 'md' | 'lg';\n\n/**\n * Kanso Protocol — FormSection\n *\n * One titled block of a form with a description and the related\n * fields. Two layouts:\n * - `inline` — title + description on the left, fields on the right\n * (the classic \"settings page\" layout).\n * - `stacked` — title + description on top, fields below (good for\n * narrow viewports and onboarding wizards).\n *\n * Pure container — drop your `<kp-form-field>` / `<kp-input>` /\n * `<kp-toggle>` etc. as children. Bottom divider is optional and on\n * by default so consecutive sections separate cleanly.\n *\n * @example\n * <kp-form-section title=\"Personal information\"\n * description=\"This information will be displayed publicly.\">\n * <kp-form-field label=\"First name\"><kp-input/></kp-form-field>\n * <kp-form-field label=\"Last name\"><kp-input/></kp-form-field>\n * <kp-form-field label=\"Email\"><kp-input type=\"email\"/></kp-form-field>\n * </kp-form-section>\n */\n@Component({\n selector: 'kp-form-section',\n imports: [KpDividerComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses' },\n template: `\n <div class=\"kp-fs__body\">\n <div class=\"kp-fs__header\">\n <h3 class=\"kp-fs__title\">{{ title }}</h3>\n @if (showDescription && description) {\n <p class=\"kp-fs__description\">{{ description }}</p>\n }\n </div>\n\n <div class=\"kp-fs__fields\">\n <ng-content/>\n </div>\n </div>\n\n @if (showDivider) {\n <kp-divider class=\"kp-fs__divider\" orientation=\"horizontal\"/>\n }\n `,\n styles: [`\n :host {\n box-sizing: border-box;\n display: block;\n width: 100%;\n font-family: var(--kp-font-family-sans, 'Onest', system-ui, sans-serif);\n color: var(--kp-color-
|
|
1
|
+
{"version":3,"file":"kanso-protocol-form-section.mjs","sources":["../../../../../packages/patterns/form-section/src/form-section.component.ts","../../../../../packages/patterns/form-section/src/kanso-protocol-form-section.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n Input,\n} from '@angular/core';\nimport { KpDividerComponent } from '@kanso-protocol/divider';\n\nexport type KpFormSectionLayout = 'inline' | 'stacked';\nexport type KpFormSectionSize = 'sm' | 'md' | 'lg';\n\n/**\n * Kanso Protocol — FormSection\n *\n * One titled block of a form with a description and the related\n * fields. Two layouts:\n * - `inline` — title + description on the left, fields on the right\n * (the classic \"settings page\" layout).\n * - `stacked` — title + description on top, fields below (good for\n * narrow viewports and onboarding wizards).\n *\n * Pure container — drop your `<kp-form-field>` / `<kp-input>` /\n * `<kp-toggle>` etc. as children. Bottom divider is optional and on\n * by default so consecutive sections separate cleanly.\n *\n * @example\n * <kp-form-section title=\"Personal information\"\n * description=\"This information will be displayed publicly.\">\n * <kp-form-field label=\"First name\"><kp-input/></kp-form-field>\n * <kp-form-field label=\"Last name\"><kp-input/></kp-form-field>\n * <kp-form-field label=\"Email\"><kp-input type=\"email\"/></kp-form-field>\n * </kp-form-section>\n */\n@Component({\n selector: 'kp-form-section',\n imports: [KpDividerComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses' },\n template: `\n <div class=\"kp-fs__body\">\n <div class=\"kp-fs__header\">\n <h3 class=\"kp-fs__title\">{{ title }}</h3>\n @if (showDescription && description) {\n <p class=\"kp-fs__description\">{{ description }}</p>\n }\n </div>\n\n <div class=\"kp-fs__fields\">\n <ng-content/>\n </div>\n </div>\n\n @if (showDivider) {\n <kp-divider class=\"kp-fs__divider\" orientation=\"horizontal\"/>\n }\n `,\n styles: [`\n :host {\n box-sizing: border-box;\n display: block;\n width: 100%;\n font-family: var(--kp-font-family-sans, 'Onest', system-ui, sans-serif);\n color: var(--kp-color-text-strong);\n }\n\n .kp-fs__body {\n display: flex;\n gap: var(--kp-fs-gap, 32px);\n align-items: flex-start;\n }\n\n /* Layouts */\n :host(.kp-fs--inline) .kp-fs__body { flex-direction: row; }\n :host(.kp-fs--stacked) .kp-fs__body { flex-direction: column; gap: 24px; }\n\n /* Sizes */\n :host(.kp-fs--sm) { --kp-fs-gap: 24px; --kp-fs-title: 16px; --kp-fs-desc: 13px; }\n :host(.kp-fs--md) { --kp-fs-gap: 32px; --kp-fs-title: 18px; --kp-fs-desc: 13px; }\n :host(.kp-fs--lg) { --kp-fs-gap: 40px; --kp-fs-title: 20px; --kp-fs-desc: 14px; }\n\n .kp-fs__header {\n flex: 0 0 auto;\n width: 320px;\n max-width: 100%;\n }\n :host(.kp-fs--stacked) .kp-fs__header { width: 100%; }\n\n .kp-fs__title {\n margin: 0;\n font-size: var(--kp-fs-title, 18px);\n font-weight: 500;\n line-height: 1.3;\n color: var(--kp-color-text-strong);\n }\n .kp-fs__description {\n margin: 4px 0 0;\n font-size: var(--kp-fs-desc, 13px);\n line-height: 1.45;\n color: var(--kp-color-text-muted);\n }\n\n .kp-fs__fields {\n flex: 1 1 auto;\n min-width: 0;\n max-width: 640px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n :host(.kp-fs--stacked) .kp-fs__fields {\n max-width: 100%;\n width: 100%;\n }\n\n .kp-fs__divider { display: block; margin-top: 24px; }\n `],\n})\nexport class KpFormSectionComponent {\n @Input() layout: KpFormSectionLayout = 'inline';\n @Input() size: KpFormSectionSize = 'md';\n @Input() title = 'Section title';\n @Input() description = '';\n @Input() showDescription = true;\n @Input() showDivider = true;\n\n get hostClasses(): string {\n return `kp-fs kp-fs--${this.layout} kp-fs--${this.size}`;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAUA;;;;;;;;;;;;;;;;;;;;;AAqBG;MAqFU,sBAAsB,CAAA;IACxB,MAAM,GAAwB,QAAQ;IACtC,IAAI,GAAsB,IAAI;IAC9B,KAAK,GAAG,eAAe;IACvB,WAAW,GAAG,EAAE;IAChB,eAAe,GAAG,IAAI;IACtB,WAAW,GAAG,IAAI;AAE3B,IAAA,IAAI,WAAW,GAAA;QACb,OAAO,CAAA,aAAA,EAAgB,IAAI,CAAC,MAAM,WAAW,IAAI,CAAC,IAAI,CAAA,CAAE;IAC1D;uGAVW,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,WAAA,EAAA,aAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,aAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA/EvB;;;;;;;;;;;;;;;;;AAiBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,ynCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EApBS,kBAAkB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,OAAA,EAAA,eAAA,EAAA,cAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAkFjB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBApFlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,OAAA,EAClB,CAAC,kBAAkB,CAAC,mBACZ,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC,EAAE,SAAS,EAAE,aAAa,EAAE,EAAA,QAAA,EACxB;;;;;;;;;;;;;;;;;AAiBT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,ynCAAA,CAAA,EAAA;;sBA+DA;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;;AC1HH;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kanso-protocol/form-section",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"peerDependencies": {
|
|
6
6
|
"@angular/core": "^18.0.0",
|
|
7
7
|
"@angular/common": "^18.0.0",
|
|
8
|
-
"@kanso-protocol/core": "
|
|
9
|
-
"@kanso-protocol/divider": ">=0.
|
|
8
|
+
"@kanso-protocol/core": ">=0.5.2",
|
|
9
|
+
"@kanso-protocol/divider": ">=0.5.2"
|
|
10
10
|
},
|
|
11
11
|
"description": "Kanso Protocol — form-section (pattern).",
|
|
12
12
|
"author": "GregNBlack",
|