@kanso-protocol/settings-panel 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-settings-panel.mjs +153 -0
  2. package/fesm2022/kanso-protocol-settings-panel.mjs.map +1 -0
  3. package/package.json +41 -0
  4. package/types/kanso-protocol-settings-panel.d.ts +64 -0
package/fesm2022/kanso-protocol-settings-panel.mjs ADDED
@@ -0,0 +1,153 @@
1
+ import * as i0 from '@angular/core';
2
+ import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
3
+
4
+ /**
5
+ * Kanso Protocol — SettingsRow
6
+ *
7
+ * One row inside a `<kp-settings-panel>`. Title + optional description
8
+ * on the left, a Control slot on the right (toggle, select, input,
9
+ * button, badge — anything you project in). Bottom divider on by
10
+ * default; consumers usually turn it off on the last row of a panel.
11
+ *
12
+ * @example
13
+ * <kp-settings-row title="Email notifications"
14
+ * description="Receive an email when something important happens.">
15
+ * <kp-toggle [on]="true"/>
16
+ * </kp-settings-row>
17
+ */
18
+ class KpSettingsRowComponent {
19
+ size = 'md';
20
+ title = 'Setting name';
21
+ description = '';
22
+ showDescription = true;
23
+ showDivider = true;
24
+ get hostClasses() {
25
+ const c = ['kp-sr', `kp-sr--${this.size}`];
26
+ if (this.showDivider)
27
+ c.push('kp-sr--with-divider');
28
+ return c.join(' ');
29
+ }
30
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpSettingsRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
31
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: KpSettingsRowComponent, isStandalone: true, selector: "kp-settings-row", inputs: { size: "size", title: "title", description: "description", showDescription: "showDescription", showDivider: "showDivider" }, host: { properties: { "class": "hostClasses" } }, ngImport: i0, template: `
32
+ <div class="kp-sr__text">
33
+ <div class="kp-sr__title">{{ title }}</div>
34
+ @if (showDescription && description) {
35
+ <div class="kp-sr__description">{{ description }}</div>
36
+ }
37
+ </div>
38
+ <div class="kp-sr__control">
39
+ <ng-content/>
40
+ </div>
41
+ `, isInline: true, styles: [":host{box-sizing:border-box;display:flex;width:100%;align-items:center;gap:var(--kp-sr-gap, 24px);padding:var(--kp-sr-pad, 16px 20px);font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif);background:transparent}:host(.kp-sr--with-divider){border-bottom:1px solid var(--kp-color-gray-100, var(--kp-color-gray-100))}:host(.kp-sr--sm){--kp-sr-gap: 16px;--kp-sr-pad: 12px 16px;--kp-sr-title-size: 13px;--kp-sr-desc-size: 12px}:host(.kp-sr--md){--kp-sr-gap: 24px;--kp-sr-pad: 16px 20px;--kp-sr-title-size: 14px;--kp-sr-desc-size: 13px}:host(.kp-sr--lg){--kp-sr-gap: 32px;--kp-sr-pad: 20px 24px;--kp-sr-title-size: 15px;--kp-sr-desc-size: 14px}.kp-sr__text{flex:1 1 auto;min-width:0;max-width:480px;display:flex;flex-direction:column;gap:2px}.kp-sr__title{font-size:var(--kp-sr-title-size, 14px);font-weight:500;color:var(--kp-color-gray-900, var(--kp-color-gray-900))}.kp-sr__description{font-size:var(--kp-sr-desc-size, 13px);color:var(--kp-color-gray-600, var(--kp-color-gray-600));line-height:1.45}.kp-sr__control{flex:0 0 auto;width:var(--kp-sr-control-w, 280px);display:flex;align-items:center;justify-content:flex-end}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
42
+ }
43
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpSettingsRowComponent, decorators: [{
44
+ type: Component,
45
+ args: [{ selector: 'kp-settings-row', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses' }, template: `
46
+ <div class="kp-sr__text">
47
+ <div class="kp-sr__title">{{ title }}</div>
48
+ @if (showDescription && description) {
49
+ <div class="kp-sr__description">{{ description }}</div>
50
+ }
51
+ </div>
52
+ <div class="kp-sr__control">
53
+ <ng-content/>
54
+ </div>
55
+ `, styles: [":host{box-sizing:border-box;display:flex;width:100%;align-items:center;gap:var(--kp-sr-gap, 24px);padding:var(--kp-sr-pad, 16px 20px);font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif);background:transparent}:host(.kp-sr--with-divider){border-bottom:1px solid var(--kp-color-gray-100, var(--kp-color-gray-100))}:host(.kp-sr--sm){--kp-sr-gap: 16px;--kp-sr-pad: 12px 16px;--kp-sr-title-size: 13px;--kp-sr-desc-size: 12px}:host(.kp-sr--md){--kp-sr-gap: 24px;--kp-sr-pad: 16px 20px;--kp-sr-title-size: 14px;--kp-sr-desc-size: 13px}:host(.kp-sr--lg){--kp-sr-gap: 32px;--kp-sr-pad: 20px 24px;--kp-sr-title-size: 15px;--kp-sr-desc-size: 14px}.kp-sr__text{flex:1 1 auto;min-width:0;max-width:480px;display:flex;flex-direction:column;gap:2px}.kp-sr__title{font-size:var(--kp-sr-title-size, 14px);font-weight:500;color:var(--kp-color-gray-900, var(--kp-color-gray-900))}.kp-sr__description{font-size:var(--kp-sr-desc-size, 13px);color:var(--kp-color-gray-600, var(--kp-color-gray-600));line-height:1.45}.kp-sr__control{flex:0 0 auto;width:var(--kp-sr-control-w, 280px);display:flex;align-items:center;justify-content:flex-end}\n"] }]
56
+ }], propDecorators: { size: [{
57
+ type: Input
58
+ }], title: [{
59
+ type: Input
60
+ }], description: [{
61
+ type: Input
62
+ }], showDescription: [{
63
+ type: Input
64
+ }], showDivider: [{
65
+ type: Input
66
+ }] } });
67
+
68
+ /**
69
+ * Kanso Protocol — SettingsPanel
70
+ *
71
+ * Card-shaped container for a group of related settings. Title +
72
+ * description in the header, then a column of `<kp-settings-row>`
73
+ * children. The card border and header are optional — turn them off
74
+ * to inline a panel inside another container.
75
+ *
76
+ * Use one panel per topical group (Notifications / Privacy / Billing).
77
+ *
78
+ * @example
79
+ * <kp-settings-panel title="Notifications"
80
+ * description="Manage how you receive updates and alerts.">
81
+ * <kp-settings-row title="Email notifications">
82
+ * <kp-toggle [on]="true"/>
83
+ * </kp-settings-row>
84
+ * <kp-settings-row title="Push notifications" [showDivider]="false">
85
+ * <kp-toggle [on]="false"/>
86
+ * </kp-settings-row>
87
+ * </kp-settings-panel>
88
+ */
89
+ class KpSettingsPanelComponent {
90
+ size = 'md';
91
+ title = 'Settings group';
92
+ description = '';
93
+ showHeader = true;
94
+ showDescription = true;
95
+ showOuterBorder = true;
96
+ get hostClasses() {
97
+ const c = ['kp-sp', `kp-sp--${this.size}`];
98
+ if (this.showOuterBorder)
99
+ c.push('kp-sp--bordered');
100
+ return c.join(' ');
101
+ }
102
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpSettingsPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
103
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: KpSettingsPanelComponent, isStandalone: true, selector: "kp-settings-panel", inputs: { size: "size", title: "title", description: "description", showHeader: "showHeader", showDescription: "showDescription", showOuterBorder: "showOuterBorder" }, host: { properties: { "class": "hostClasses" } }, ngImport: i0, template: `
104
+ @if (showHeader) {
105
+ <header class="kp-sp__header">
106
+ <h3 class="kp-sp__title">{{ title }}</h3>
107
+ @if (showDescription && description) {
108
+ <p class="kp-sp__description">{{ description }}</p>
109
+ }
110
+ </header>
111
+ }
112
+
113
+ <div class="kp-sp__rows">
114
+ <ng-content/>
115
+ </div>
116
+ `, isInline: true, styles: [":host{box-sizing:border-box;display:block;width:100%;min-width:320px;background:var(--kp-color-white, var(--kp-color-white));font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif);color:var(--kp-color-gray-900, var(--kp-color-gray-900))}:host(.kp-sp--bordered){border:1px solid var(--kp-color-gray-200, var(--kp-color-gray-200));border-radius:12px;overflow:hidden}:host(.kp-sp--sm){--kp-sp-header-pad: 12px 16px;--kp-sp-title: 16px;--kp-sp-desc: 13px}:host(.kp-sp--md){--kp-sp-header-pad: 16px 20px;--kp-sp-title: 18px;--kp-sp-desc: 13px}:host(.kp-sp--lg){--kp-sp-header-pad: 20px 24px;--kp-sp-title: 20px;--kp-sp-desc: 14px}.kp-sp__header{padding:var(--kp-sp-header-pad, 16px 20px);border-bottom:1px solid var(--kp-color-gray-100, var(--kp-color-gray-100))}.kp-sp__title{margin:0;font-size:var(--kp-sp-title, 18px);font-weight:500;line-height:1.3;color:var(--kp-color-gray-900, var(--kp-color-gray-900))}.kp-sp__description{margin:4px 0 0;font-size:var(--kp-sp-desc, 13px);line-height:1.45;color:var(--kp-color-gray-600, var(--kp-color-gray-600))}.kp-sp__rows{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
117
+ }
118
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpSettingsPanelComponent, decorators: [{
119
+ type: Component,
120
+ args: [{ selector: 'kp-settings-panel', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses' }, template: `
121
+ @if (showHeader) {
122
+ <header class="kp-sp__header">
123
+ <h3 class="kp-sp__title">{{ title }}</h3>
124
+ @if (showDescription && description) {
125
+ <p class="kp-sp__description">{{ description }}</p>
126
+ }
127
+ </header>
128
+ }
129
+
130
+ <div class="kp-sp__rows">
131
+ <ng-content/>
132
+ </div>
133
+ `, styles: [":host{box-sizing:border-box;display:block;width:100%;min-width:320px;background:var(--kp-color-white, var(--kp-color-white));font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif);color:var(--kp-color-gray-900, var(--kp-color-gray-900))}:host(.kp-sp--bordered){border:1px solid var(--kp-color-gray-200, var(--kp-color-gray-200));border-radius:12px;overflow:hidden}:host(.kp-sp--sm){--kp-sp-header-pad: 12px 16px;--kp-sp-title: 16px;--kp-sp-desc: 13px}:host(.kp-sp--md){--kp-sp-header-pad: 16px 20px;--kp-sp-title: 18px;--kp-sp-desc: 13px}:host(.kp-sp--lg){--kp-sp-header-pad: 20px 24px;--kp-sp-title: 20px;--kp-sp-desc: 14px}.kp-sp__header{padding:var(--kp-sp-header-pad, 16px 20px);border-bottom:1px solid var(--kp-color-gray-100, var(--kp-color-gray-100))}.kp-sp__title{margin:0;font-size:var(--kp-sp-title, 18px);font-weight:500;line-height:1.3;color:var(--kp-color-gray-900, var(--kp-color-gray-900))}.kp-sp__description{margin:4px 0 0;font-size:var(--kp-sp-desc, 13px);line-height:1.45;color:var(--kp-color-gray-600, var(--kp-color-gray-600))}.kp-sp__rows{display:flex;flex-direction:column}\n"] }]
134
+ }], propDecorators: { size: [{
135
+ type: Input
136
+ }], title: [{
137
+ type: Input
138
+ }], description: [{
139
+ type: Input
140
+ }], showHeader: [{
141
+ type: Input
142
+ }], showDescription: [{
143
+ type: Input
144
+ }], showOuterBorder: [{
145
+ type: Input
146
+ }] } });
147
+
148
+ /**
149
+ * Generated bundle index. Do not edit.
150
+ */
151
+
152
+ export { KpSettingsPanelComponent, KpSettingsRowComponent };
153
+ //# sourceMappingURL=kanso-protocol-settings-panel.mjs.map
package/fesm2022/kanso-protocol-settings-panel.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"kanso-protocol-settings-panel.mjs","sources":["../../../../../packages/patterns/settings-panel/src/settings-row.component.ts","../../../../../packages/patterns/settings-panel/src/settings-panel.component.ts","../../../../../packages/patterns/settings-panel/src/kanso-protocol-settings-panel.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n Input,\n} from '@angular/core';\n\nexport type KpSettingsRowSize = 'sm' | 'md' | 'lg';\n\n/**\n * Kanso Protocol — SettingsRow\n *\n * One row inside a `<kp-settings-panel>`. Title + optional description\n * on the left, a Control slot on the right (toggle, select, input,\n * button, badge — anything you project in). Bottom divider on by\n * default; consumers usually turn it off on the last row of a panel.\n *\n * @example\n * <kp-settings-row title=\"Email notifications\"\n * description=\"Receive an email when something important happens.\">\n * <kp-toggle [on]=\"true\"/>\n * </kp-settings-row>\n */\n@Component({\n selector: 'kp-settings-row',\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses' },\n template: `\n <div class=\"kp-sr__text\">\n <div class=\"kp-sr__title\">{{ title }}</div>\n @if (showDescription && description) {\n <div class=\"kp-sr__description\">{{ description }}</div>\n }\n </div>\n <div class=\"kp-sr__control\">\n <ng-content/>\n </div>\n `,\n styles: [`\n :host {\n box-sizing: border-box;\n display: flex;\n width: 100%;\n align-items: center;\n gap: var(--kp-sr-gap, 24px);\n padding: var(--kp-sr-pad, 16px 20px);\n font-family: var(--kp-font-family-sans, 'Onest', system-ui, sans-serif);\n background: transparent;\n }\n\n :host(.kp-sr--with-divider) {\n border-bottom: 1px solid var(--kp-color-gray-100, var(--kp-color-gray-100));\n }\n\n :host(.kp-sr--sm) { --kp-sr-gap: 16px; --kp-sr-pad: 12px 16px; --kp-sr-title-size: 13px; --kp-sr-desc-size: 12px; }\n :host(.kp-sr--md) { --kp-sr-gap: 24px; --kp-sr-pad: 16px 20px; --kp-sr-title-size: 14px; --kp-sr-desc-size: 13px; }\n :host(.kp-sr--lg) { --kp-sr-gap: 32px; --kp-sr-pad: 20px 24px; --kp-sr-title-size: 15px; --kp-sr-desc-size: 14px; }\n\n .kp-sr__text {\n flex: 1 1 auto;\n min-width: 0;\n max-width: 480px;\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n .kp-sr__title {\n font-size: var(--kp-sr-title-size, 14px);\n font-weight: 500;\n color: var(--kp-color-gray-900, var(--kp-color-gray-900));\n }\n .kp-sr__description {\n font-size: var(--kp-sr-desc-size, 13px);\n color: var(--kp-color-gray-600, var(--kp-color-gray-600));\n line-height: 1.45;\n }\n\n .kp-sr__control {\n flex: 0 0 auto;\n width: var(--kp-sr-control-w, 280px);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n }\n `],\n})\nexport class KpSettingsRowComponent {\n @Input() size: KpSettingsRowSize = 'md';\n @Input() title = 'Setting name';\n @Input() description = '';\n @Input() showDescription = true;\n @Input() showDivider = true;\n\n get hostClasses(): string {\n const c = ['kp-sr', `kp-sr--${this.size}`];\n if (this.showDivider) c.push('kp-sr--with-divider');\n return c.join(' ');\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n Input,\n} from '@angular/core';\n\nexport type KpSettingsPanelSize = 'sm' | 'md' | 'lg';\n\n/**\n * Kanso Protocol — SettingsPanel\n *\n * Card-shaped container for a group of related settings. Title +\n * description in the header, then a column of `<kp-settings-row>`\n * children. The card border and header are optional — turn them off\n * to inline a panel inside another container.\n *\n * Use one panel per topical group (Notifications / Privacy / Billing).\n *\n * @example\n * <kp-settings-panel title=\"Notifications\"\n * description=\"Manage how you receive updates and alerts.\">\n * <kp-settings-row title=\"Email notifications\">\n * <kp-toggle [on]=\"true\"/>\n * </kp-settings-row>\n * <kp-settings-row title=\"Push notifications\" [showDivider]=\"false\">\n * <kp-toggle [on]=\"false\"/>\n * </kp-settings-row>\n * </kp-settings-panel>\n */\n@Component({\n selector: 'kp-settings-panel',\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses' },\n template: `\n @if (showHeader) {\n <header class=\"kp-sp__header\">\n <h3 class=\"kp-sp__title\">{{ title }}</h3>\n @if (showDescription && description) {\n <p class=\"kp-sp__description\">{{ description }}</p>\n }\n </header>\n }\n\n <div class=\"kp-sp__rows\">\n <ng-content/>\n </div>\n `,\n styles: [`\n :host {\n box-sizing: border-box;\n display: block;\n width: 100%;\n min-width: 320px;\n background: var(--kp-color-white, var(--kp-color-white));\n font-family: var(--kp-font-family-sans, 'Onest', system-ui, sans-serif);\n color: var(--kp-color-gray-900, var(--kp-color-gray-900));\n }\n\n :host(.kp-sp--bordered) {\n border: 1px solid var(--kp-color-gray-200, var(--kp-color-gray-200));\n border-radius: 12px;\n overflow: hidden;\n }\n\n :host(.kp-sp--sm) { --kp-sp-header-pad: 12px 16px; --kp-sp-title: 16px; --kp-sp-desc: 13px; }\n :host(.kp-sp--md) { --kp-sp-header-pad: 16px 20px; --kp-sp-title: 18px; --kp-sp-desc: 13px; }\n :host(.kp-sp--lg) { --kp-sp-header-pad: 20px 24px; --kp-sp-title: 20px; --kp-sp-desc: 14px; }\n\n .kp-sp__header {\n padding: var(--kp-sp-header-pad, 16px 20px);\n border-bottom: 1px solid var(--kp-color-gray-100, var(--kp-color-gray-100));\n }\n .kp-sp__title {\n margin: 0;\n font-size: var(--kp-sp-title, 18px);\n font-weight: 500;\n line-height: 1.3;\n color: var(--kp-color-gray-900, var(--kp-color-gray-900));\n }\n .kp-sp__description {\n margin: 4px 0 0;\n font-size: var(--kp-sp-desc, 13px);\n line-height: 1.45;\n color: var(--kp-color-gray-600, var(--kp-color-gray-600));\n }\n\n .kp-sp__rows {\n display: flex;\n flex-direction: column;\n }\n `],\n})\nexport class KpSettingsPanelComponent {\n @Input() size: KpSettingsPanelSize = 'md';\n @Input() title = 'Settings group';\n @Input() description = '';\n @Input() showHeader = true;\n @Input() showDescription = true;\n @Input() showOuterBorder = true;\n\n get hostClasses(): string {\n const c = ['kp-sp', `kp-sp--${this.size}`];\n if (this.showOuterBorder) c.push('kp-sp--bordered');\n return c.join(' ');\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/package.json ADDED
@@ -0,0 +1,41 @@
1
+ {
2
+ "name": "@kanso-protocol/settings-panel",
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 — settings-panel (pattern).",
11
+ "author": "GregNBlack",
12
+ "repository": {
13
+ "type": "git",
14
+ "url": "https://github.com/GregNBlack/kanso-protocol.git",
15
+ "directory": "packages/patterns/settings-panel"
16
+ },
17
+ "homepage": "https://gregnblack.github.io/kanso-protocol/?path=/docs/patterns-settingspanel--docs",
18
+ "bugs": "https://github.com/GregNBlack/kanso-protocol/issues",
19
+ "keywords": [
20
+ "design-system",
21
+ "angular",
22
+ "kanso",
23
+ "settings-panel"
24
+ ],
25
+ "sideEffects": false,
26
+ "module": "fesm2022/kanso-protocol-settings-panel.mjs",
27
+ "typings": "types/kanso-protocol-settings-panel.d.ts",
28
+ "exports": {
29
+ "./package.json": {
30
+ "default": "./package.json"
31
+ },
32
+ ".": {
33
+ "types": "./types/kanso-protocol-settings-panel.d.ts",
34
+ "default": "./fesm2022/kanso-protocol-settings-panel.mjs"
35
+ }
36
+ },
37
+ "type": "module",
38
+ "dependencies": {
39
+ "tslib": "^2.3.0"
40
+ }
41
+ }
package/types/kanso-protocol-settings-panel.d.ts ADDED
@@ -0,0 +1,64 @@
1
+ import * as i0 from '@angular/core';
2
+
3
+ type KpSettingsRowSize = 'sm' | 'md' | 'lg';
4
+ /**
5
+ * Kanso Protocol — SettingsRow
6
+ *
7
+ * One row inside a `<kp-settings-panel>`. Title + optional description
8
+ * on the left, a Control slot on the right (toggle, select, input,
9
+ * button, badge — anything you project in). Bottom divider on by
10
+ * default; consumers usually turn it off on the last row of a panel.
11
+ *
12
+ * @example
13
+ * <kp-settings-row title="Email notifications"
14
+ * description="Receive an email when something important happens.">
15
+ * <kp-toggle [on]="true"/>
16
+ * </kp-settings-row>
17
+ */
18
+ declare class KpSettingsRowComponent {
19
+ size: KpSettingsRowSize;
20
+ title: string;
21
+ description: string;
22
+ showDescription: boolean;
23
+ showDivider: boolean;
24
+ get hostClasses(): string;
25
+ static ɵfac: i0.ɵɵFactoryDeclaration<KpSettingsRowComponent, never>;
26
+ static ɵcmp: i0.ɵɵComponentDeclaration<KpSettingsRowComponent, "kp-settings-row", never, { "size": { "alias": "size"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "showDescription": { "alias": "showDescription"; "required": false; }; "showDivider": { "alias": "showDivider"; "required": false; }; }, {}, never, ["*"], true, never>;
27
+ }
28
+
29
+ type KpSettingsPanelSize = 'sm' | 'md' | 'lg';
30
+ /**
31
+ * Kanso Protocol — SettingsPanel
32
+ *
33
+ * Card-shaped container for a group of related settings. Title +
34
+ * description in the header, then a column of `<kp-settings-row>`
35
+ * children. The card border and header are optional — turn them off
36
+ * to inline a panel inside another container.
37
+ *
38
+ * Use one panel per topical group (Notifications / Privacy / Billing).
39
+ *
40
+ * @example
41
+ * <kp-settings-panel title="Notifications"
42
+ * description="Manage how you receive updates and alerts.">
43
+ * <kp-settings-row title="Email notifications">
44
+ * <kp-toggle [on]="true"/>
45
+ * </kp-settings-row>
46
+ * <kp-settings-row title="Push notifications" [showDivider]="false">
47
+ * <kp-toggle [on]="false"/>
48
+ * </kp-settings-row>
49
+ * </kp-settings-panel>
50
+ */
51
+ declare class KpSettingsPanelComponent {
52
+ size: KpSettingsPanelSize;
53
+ title: string;
54
+ description: string;
55
+ showHeader: boolean;
56
+ showDescription: boolean;
57
+ showOuterBorder: boolean;
58
+ get hostClasses(): string;
59
+ static ɵfac: i0.ɵɵFactoryDeclaration<KpSettingsPanelComponent, never>;
60
+ static ɵcmp: i0.ɵɵComponentDeclaration<KpSettingsPanelComponent, "kp-settings-panel", never, { "size": { "alias": "size"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "showDescription": { "alias": "showDescription"; "required": false; }; "showOuterBorder": { "alias": "showOuterBorder"; "required": false; }; }, {}, never, ["*"], true, never>;
61
+ }
62
+
63
+ export { KpSettingsPanelComponent, KpSettingsRowComponent };
64
+ export type { KpSettingsPanelSize, KpSettingsRowSize };