@kanso-protocol/settings-panel 0.1.0 → 0.5.3

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.
@@ -38,7 +38,7 @@ class KpSettingsRowComponent {
38
38
  <div class="kp-sr__control">
39
39
  <ng-content/>
40
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 });
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-border-subtle)}: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-text-strong)}.kp-sr__description{font-size:var(--kp-sr-desc-size, 13px);color:var(--kp-color-text-muted);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
42
  }
43
43
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpSettingsRowComponent, decorators: [{
44
44
  type: Component,
@@ -52,7 +52,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
52
52
  <div class="kp-sr__control">
53
53
  <ng-content/>
54
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"] }]
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-border-subtle)}: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-text-strong)}.kp-sr__description{font-size:var(--kp-sr-desc-size, 13px);color:var(--kp-color-text-muted);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
56
  }], propDecorators: { size: [{
57
57
  type: Input
58
58
  }], title: [{
@@ -113,7 +113,7 @@ class KpSettingsPanelComponent {
113
113
  <div class="kp-sp__rows">
114
114
  <ng-content/>
115
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 });
116
+ `, isInline: true, styles: [":host{box-sizing:border-box;display:block;width:100%;min-width:320px;background:var(--kp-color-surface-base);font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif);color:var(--kp-color-text-strong)}:host(.kp-sp--bordered){border:1px solid var(--kp-color-border-default);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-border-subtle)}.kp-sp__title{margin:0;font-size:var(--kp-sp-title, 18px);font-weight:500;line-height:1.3;color:var(--kp-color-text-strong)}.kp-sp__description{margin:4px 0 0;font-size:var(--kp-sp-desc, 13px);line-height:1.45;color:var(--kp-color-text-muted)}.kp-sp__rows{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
117
117
  }
118
118
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpSettingsPanelComponent, decorators: [{
119
119
  type: Component,
@@ -130,7 +130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
130
130
  <div class="kp-sp__rows">
131
131
  <ng-content/>
132
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"] }]
133
+ `, styles: [":host{box-sizing:border-box;display:block;width:100%;min-width:320px;background:var(--kp-color-surface-base);font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif);color:var(--kp-color-text-strong)}:host(.kp-sp--bordered){border:1px solid var(--kp-color-border-default);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-border-subtle)}.kp-sp__title{margin:0;font-size:var(--kp-sp-title, 18px);font-weight:500;line-height:1.3;color:var(--kp-color-text-strong)}.kp-sp__description{margin:4px 0 0;font-size:var(--kp-sp-desc, 13px);line-height:1.45;color:var(--kp-color-text-muted)}.kp-sp__rows{display:flex;flex-direction:column}\n"] }]
134
134
  }], propDecorators: { size: [{
135
135
  type: Input
136
136
  }], title: [{
@@ -1 +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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"}
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-border-subtle);\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-text-strong);\n }\n .kp-sr__description {\n font-size: var(--kp-sr-desc-size, 13px);\n color: var(--kp-color-text-muted);\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-surface-base);\n font-family: var(--kp-font-family-sans, 'Onest', system-ui, sans-serif);\n color: var(--kp-color-text-strong);\n }\n\n :host(.kp-sp--bordered) {\n border: 1px solid var(--kp-color-border-default);\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-border-subtle);\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-text-strong);\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-text-muted);\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 CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@kanso-protocol/settings-panel",
3
- "version": "0.1.0",
3
+ "version": "0.5.3",
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": "^0.0.1"
8
+ "@kanso-protocol/core": ">=0.5.3"
9
9
  },
10
10
  "description": "Kanso Protocol — settings-panel (pattern).",
11
11
  "author": "GregNBlack",