@kanso-protocol/settings-panel 2.0.2 → 2.0.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.
|
@@ -102,12 +102,12 @@ class KpSettingsPanelComponent {
|
|
|
102
102
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpSettingsPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
103
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
104
|
@if (showHeader) {
|
|
105
|
-
<
|
|
105
|
+
<div class="kp-sp__header">
|
|
106
106
|
<h3 class="kp-sp__title">{{ title }}</h3>
|
|
107
107
|
@if (showDescription && description) {
|
|
108
108
|
<p class="kp-sp__description">{{ description }}</p>
|
|
109
109
|
}
|
|
110
|
-
</
|
|
110
|
+
</div>
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
<div class="kp-sp__rows">
|
|
@@ -119,12 +119,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
119
119
|
type: Component,
|
|
120
120
|
args: [{ selector: 'kp-settings-panel', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses' }, template: `
|
|
121
121
|
@if (showHeader) {
|
|
122
|
-
<
|
|
122
|
+
<div class="kp-sp__header">
|
|
123
123
|
<h3 class="kp-sp__title">{{ title }}</h3>
|
|
124
124
|
@if (showDescription && description) {
|
|
125
125
|
<p class="kp-sp__description">{{ description }}</p>
|
|
126
126
|
}
|
|
127
|
-
</
|
|
127
|
+
</div>
|
|
128
128
|
}
|
|
129
129
|
|
|
130
130
|
<div class="kp-sp__rows">
|
|
@@ -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-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 <
|
|
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 <div 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 </div>\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": "2.0.
|
|
3
|
+
"version": "2.0.3",
|
|
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": ">=2.0.
|
|
8
|
+
"@kanso-protocol/core": ">=2.0.3"
|
|
9
9
|
},
|
|
10
10
|
"description": "Kanso Protocol — settings-panel (pattern).",
|
|
11
11
|
"author": "GregNBlack",
|