@kanso-protocol/skeleton 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.
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Kanso Protocol — Skeleton
|
|
6
|
+
*
|
|
7
|
+
* Static placeholder shown while real content is loading. Six shape
|
|
8
|
+
* presets cover the common patterns (line, circle, rectangle, avatar,
|
|
9
|
+
* button, card) with a size ramp. `animated` toggles the shimmer
|
|
10
|
+
* gradient — on by default.
|
|
11
|
+
*
|
|
12
|
+
* Composition: project children for complex placeholders. For simple
|
|
13
|
+
* skeletons, just drop `<kp-skeleton shape="line" size="md"/>` and
|
|
14
|
+
* optionally override `[width]` to fit the real content width.
|
|
15
|
+
*/
|
|
16
|
+
class KpSkeletonComponent {
|
|
17
|
+
shape = 'line';
|
|
18
|
+
size = 'md';
|
|
19
|
+
animated = true;
|
|
20
|
+
/** Override width — useful for line skeletons (e.g. '80%' or '240px'). */
|
|
21
|
+
width = null;
|
|
22
|
+
/** Override height when defaults don't fit. */
|
|
23
|
+
height = null;
|
|
24
|
+
get hostClasses() {
|
|
25
|
+
const c = ['kp-sk', `kp-sk--${this.shape}`, `kp-sk--${this.size}`];
|
|
26
|
+
if (this.animated)
|
|
27
|
+
c.push('kp-sk--animated');
|
|
28
|
+
return c.join(' ');
|
|
29
|
+
}
|
|
30
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
31
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: KpSkeletonComponent, isStandalone: true, selector: "kp-skeleton", inputs: { shape: "shape", size: "size", animated: "animated", width: "width", height: "height" }, host: { properties: { "class": "hostClasses", "attr.aria-hidden": "\"true\"", "style.width": "width", "style.height": "height" } }, ngImport: i0, template: `
|
|
32
|
+
@if (shape === 'avatar') {
|
|
33
|
+
<span class="kp-sk__avatar-circle"></span>
|
|
34
|
+
<span class="kp-sk__avatar-text">
|
|
35
|
+
<span class="kp-sk__line-80"></span>
|
|
36
|
+
<span class="kp-sk__line-120"></span>
|
|
37
|
+
</span>
|
|
38
|
+
} @else if (shape === 'card') {
|
|
39
|
+
<span class="kp-sk__card-img"></span>
|
|
40
|
+
<span class="kp-sk__card-title"></span>
|
|
41
|
+
<span class="kp-sk__card-line"></span>
|
|
42
|
+
<span class="kp-sk__card-line kp-sk__card-line-2"></span>
|
|
43
|
+
}
|
|
44
|
+
`, isInline: true, styles: ["@keyframes kp-sk-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@media(prefers-reduced-motion:reduce){:host(.kp-sk--animated),:host(.kp-sk--avatar.kp-sk--animated),:host(.kp-sk--card.kp-sk--animated){animation:none!important}}:host{display:inline-block;background:var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100));border-radius:4px;vertical-align:middle}:host(.kp-sk--animated){background-image:linear-gradient(90deg,var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100)) 0%,var(--kp-color-skeleton-bg-highlight, var(--kp-color-gray-200)) 50%,var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100)) 100%);background-size:200% 100%;animation:kp-sk-shimmer var(--kp-motion-duration-shimmer) ease-in-out infinite}:host(.kp-sk--line){border-radius:4px}:host(.kp-sk--circle){border-radius:50%}:host(.kp-sk--rectangle){border-radius:8px}:host(.kp-sk--button){border-radius:var(--kp-sk-btn-radius, 12px)}:host(.kp-sk--line.kp-sk--xs){height:8px}:host(.kp-sk--line.kp-sk--sm){height:12px}:host(.kp-sk--line.kp-sk--md){height:16px}:host(.kp-sk--line.kp-sk--lg){height:20px}:host(.kp-sk--line.kp-sk--xl){height:24px}:host(.kp-sk--circle.kp-sk--xs){width:24px;height:24px}:host(.kp-sk--circle.kp-sk--sm){width:32px;height:32px}:host(.kp-sk--circle.kp-sk--md){width:40px;height:40px}:host(.kp-sk--circle.kp-sk--lg){width:56px;height:56px}:host(.kp-sk--circle.kp-sk--xl){width:72px;height:72px}:host(.kp-sk--rectangle.kp-sk--xs){width:120px;height:80px}:host(.kp-sk--rectangle.kp-sk--sm){width:200px;height:120px}:host(.kp-sk--rectangle.kp-sk--md){width:320px;height:200px}:host(.kp-sk--rectangle.kp-sk--lg){width:480px;height:300px}:host(.kp-sk--rectangle.kp-sk--xl){width:640px;height:400px}:host(.kp-sk--button.kp-sk--xs){width:80px;height:24px;--kp-sk-btn-radius: 8px}:host(.kp-sk--button.kp-sk--sm){width:96px;height:28px;--kp-sk-btn-radius: 10px}:host(.kp-sk--button.kp-sk--md){width:112px;height:36px;--kp-sk-btn-radius: 12px}:host(.kp-sk--button.kp-sk--lg){width:120px;height:44px;--kp-sk-btn-radius: 14px}:host(.kp-sk--button.kp-sk--xl){width:128px;height:52px;--kp-sk-btn-radius: 16px}:host(.kp-sk--avatar){display:inline-flex;align-items:center;gap:12px;background:transparent;animation:none}.kp-sk__avatar-circle{display:block;width:40px;height:40px;border-radius:50%;background:var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100))}.kp-sk__avatar-text{display:inline-flex;flex-direction:column;gap:6px}.kp-sk__line-80,.kp-sk__line-120{display:block;height:12px;border-radius:4px;background:var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100))}.kp-sk__line-80{width:80px}.kp-sk__line-120{width:120px;height:14px}:host(.kp-sk--avatar.kp-sk--animated) .kp-sk__avatar-circle,:host(.kp-sk--avatar.kp-sk--animated) .kp-sk__line-80,:host(.kp-sk--avatar.kp-sk--animated) .kp-sk__line-120{background-image:linear-gradient(90deg,var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100)) 0%,var(--kp-color-skeleton-bg-highlight, var(--kp-color-gray-200)) 50%,var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100)) 100%);background-size:200% 100%;animation:kp-sk-shimmer var(--kp-motion-duration-shimmer) ease-in-out infinite}:host(.kp-sk--card){display:inline-flex;flex-direction:column;gap:12px;width:320px;background:transparent;animation:none}.kp-sk__card-img{display:block;width:100%;height:180px;border-radius:8px;background:var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100))}.kp-sk__card-title{display:block;width:70%;height:16px;border-radius:4px;background:var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100))}.kp-sk__card-line{display:block;width:100%;height:12px;border-radius:4px;background:var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100))}.kp-sk__card-line-2{width:85%}:host(.kp-sk--card.kp-sk--animated) .kp-sk__card-img,:host(.kp-sk--card.kp-sk--animated) .kp-sk__card-title,:host(.kp-sk--card.kp-sk--animated) .kp-sk__card-line{background-image:linear-gradient(90deg,var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100)) 0%,var(--kp-color-skeleton-bg-highlight, var(--kp-color-gray-200)) 50%,var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100)) 100%);background-size:200% 100%;animation:kp-sk-shimmer var(--kp-motion-duration-shimmer) ease-in-out infinite}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
45
|
+
}
|
|
46
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpSkeletonComponent, decorators: [{
|
|
47
|
+
type: Component,
|
|
48
|
+
args: [{ selector: 'kp-skeleton', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
49
|
+
'[class]': 'hostClasses',
|
|
50
|
+
'[attr.aria-hidden]': '"true"',
|
|
51
|
+
'[style.width]': 'width',
|
|
52
|
+
'[style.height]': 'height',
|
|
53
|
+
}, template: `
|
|
54
|
+
@if (shape === 'avatar') {
|
|
55
|
+
<span class="kp-sk__avatar-circle"></span>
|
|
56
|
+
<span class="kp-sk__avatar-text">
|
|
57
|
+
<span class="kp-sk__line-80"></span>
|
|
58
|
+
<span class="kp-sk__line-120"></span>
|
|
59
|
+
</span>
|
|
60
|
+
} @else if (shape === 'card') {
|
|
61
|
+
<span class="kp-sk__card-img"></span>
|
|
62
|
+
<span class="kp-sk__card-title"></span>
|
|
63
|
+
<span class="kp-sk__card-line"></span>
|
|
64
|
+
<span class="kp-sk__card-line kp-sk__card-line-2"></span>
|
|
65
|
+
}
|
|
66
|
+
`, styles: ["@keyframes kp-sk-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@media(prefers-reduced-motion:reduce){:host(.kp-sk--animated),:host(.kp-sk--avatar.kp-sk--animated),:host(.kp-sk--card.kp-sk--animated){animation:none!important}}:host{display:inline-block;background:var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100));border-radius:4px;vertical-align:middle}:host(.kp-sk--animated){background-image:linear-gradient(90deg,var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100)) 0%,var(--kp-color-skeleton-bg-highlight, var(--kp-color-gray-200)) 50%,var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100)) 100%);background-size:200% 100%;animation:kp-sk-shimmer var(--kp-motion-duration-shimmer) ease-in-out infinite}:host(.kp-sk--line){border-radius:4px}:host(.kp-sk--circle){border-radius:50%}:host(.kp-sk--rectangle){border-radius:8px}:host(.kp-sk--button){border-radius:var(--kp-sk-btn-radius, 12px)}:host(.kp-sk--line.kp-sk--xs){height:8px}:host(.kp-sk--line.kp-sk--sm){height:12px}:host(.kp-sk--line.kp-sk--md){height:16px}:host(.kp-sk--line.kp-sk--lg){height:20px}:host(.kp-sk--line.kp-sk--xl){height:24px}:host(.kp-sk--circle.kp-sk--xs){width:24px;height:24px}:host(.kp-sk--circle.kp-sk--sm){width:32px;height:32px}:host(.kp-sk--circle.kp-sk--md){width:40px;height:40px}:host(.kp-sk--circle.kp-sk--lg){width:56px;height:56px}:host(.kp-sk--circle.kp-sk--xl){width:72px;height:72px}:host(.kp-sk--rectangle.kp-sk--xs){width:120px;height:80px}:host(.kp-sk--rectangle.kp-sk--sm){width:200px;height:120px}:host(.kp-sk--rectangle.kp-sk--md){width:320px;height:200px}:host(.kp-sk--rectangle.kp-sk--lg){width:480px;height:300px}:host(.kp-sk--rectangle.kp-sk--xl){width:640px;height:400px}:host(.kp-sk--button.kp-sk--xs){width:80px;height:24px;--kp-sk-btn-radius: 8px}:host(.kp-sk--button.kp-sk--sm){width:96px;height:28px;--kp-sk-btn-radius: 10px}:host(.kp-sk--button.kp-sk--md){width:112px;height:36px;--kp-sk-btn-radius: 12px}:host(.kp-sk--button.kp-sk--lg){width:120px;height:44px;--kp-sk-btn-radius: 14px}:host(.kp-sk--button.kp-sk--xl){width:128px;height:52px;--kp-sk-btn-radius: 16px}:host(.kp-sk--avatar){display:inline-flex;align-items:center;gap:12px;background:transparent;animation:none}.kp-sk__avatar-circle{display:block;width:40px;height:40px;border-radius:50%;background:var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100))}.kp-sk__avatar-text{display:inline-flex;flex-direction:column;gap:6px}.kp-sk__line-80,.kp-sk__line-120{display:block;height:12px;border-radius:4px;background:var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100))}.kp-sk__line-80{width:80px}.kp-sk__line-120{width:120px;height:14px}:host(.kp-sk--avatar.kp-sk--animated) .kp-sk__avatar-circle,:host(.kp-sk--avatar.kp-sk--animated) .kp-sk__line-80,:host(.kp-sk--avatar.kp-sk--animated) .kp-sk__line-120{background-image:linear-gradient(90deg,var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100)) 0%,var(--kp-color-skeleton-bg-highlight, var(--kp-color-gray-200)) 50%,var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100)) 100%);background-size:200% 100%;animation:kp-sk-shimmer var(--kp-motion-duration-shimmer) ease-in-out infinite}:host(.kp-sk--card){display:inline-flex;flex-direction:column;gap:12px;width:320px;background:transparent;animation:none}.kp-sk__card-img{display:block;width:100%;height:180px;border-radius:8px;background:var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100))}.kp-sk__card-title{display:block;width:70%;height:16px;border-radius:4px;background:var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100))}.kp-sk__card-line{display:block;width:100%;height:12px;border-radius:4px;background:var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100))}.kp-sk__card-line-2{width:85%}:host(.kp-sk--card.kp-sk--animated) .kp-sk__card-img,:host(.kp-sk--card.kp-sk--animated) .kp-sk__card-title,:host(.kp-sk--card.kp-sk--animated) .kp-sk__card-line{background-image:linear-gradient(90deg,var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100)) 0%,var(--kp-color-skeleton-bg-highlight, var(--kp-color-gray-200)) 50%,var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100)) 100%);background-size:200% 100%;animation:kp-sk-shimmer var(--kp-motion-duration-shimmer) ease-in-out infinite}\n"] }]
|
|
67
|
+
}], propDecorators: { shape: [{
|
|
68
|
+
type: Input
|
|
69
|
+
}], size: [{
|
|
70
|
+
type: Input
|
|
71
|
+
}], animated: [{
|
|
72
|
+
type: Input
|
|
73
|
+
}], width: [{
|
|
74
|
+
type: Input
|
|
75
|
+
}], height: [{
|
|
76
|
+
type: Input
|
|
77
|
+
}] } });
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* Generated bundle index. Do not edit.
|
|
81
|
+
*/
|
|
82
|
+
|
|
83
|
+
export { KpSkeletonComponent };
|
|
84
|
+
//# sourceMappingURL=kanso-protocol-skeleton.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"kanso-protocol-skeleton.mjs","sources":["../../../../../packages/components/skeleton/src/skeleton.component.ts","../../../../../packages/components/skeleton/src/kanso-protocol-skeleton.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\nexport type KpSkeletonShape = 'line' | 'circle' | 'rectangle' | 'avatar' | 'button' | 'card';\nexport type KpSkeletonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Kanso Protocol — Skeleton\n *\n * Static placeholder shown while real content is loading. Six shape\n * presets cover the common patterns (line, circle, rectangle, avatar,\n * button, card) with a size ramp. `animated` toggles the shimmer\n * gradient — on by default.\n *\n * Composition: project children for complex placeholders. For simple\n * skeletons, just drop `<kp-skeleton shape=\"line\" size=\"md\"/>` and\n * optionally override `[width]` to fit the real content width.\n */\n@Component({\n selector: 'kp-skeleton',\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': 'hostClasses',\n '[attr.aria-hidden]': '\"true\"',\n '[style.width]': 'width',\n '[style.height]': 'height',\n },\n template: `\n @if (shape === 'avatar') {\n <span class=\"kp-sk__avatar-circle\"></span>\n <span class=\"kp-sk__avatar-text\">\n <span class=\"kp-sk__line-80\"></span>\n <span class=\"kp-sk__line-120\"></span>\n </span>\n } @else if (shape === 'card') {\n <span class=\"kp-sk__card-img\"></span>\n <span class=\"kp-sk__card-title\"></span>\n <span class=\"kp-sk__card-line\"></span>\n <span class=\"kp-sk__card-line kp-sk__card-line-2\"></span>\n }\n `,\n styles: [`\n @keyframes kp-sk-shimmer {\n 0% { background-position: -200% 0; }\n 100% { background-position: 200% 0; }\n }\n\n /* Reduce-motion: stop the shimmer entirely. A static gray placeholder\n still conveys \"loading\" without moving elements on the page. */\n @media (prefers-reduced-motion: reduce) {\n :host(.kp-sk--animated),\n :host(.kp-sk--avatar.kp-sk--animated),\n :host(.kp-sk--card.kp-sk--animated) { animation: none !important; }\n }\n\n :host {\n display: inline-block;\n background: var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100));\n border-radius: 4px;\n vertical-align: middle;\n }\n :host(.kp-sk--animated) {\n background-image: linear-gradient(\n 90deg,\n var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100)) 0%,\n var(--kp-color-skeleton-bg-highlight, var(--kp-color-gray-200)) 50%,\n var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100)) 100%\n );\n background-size: 200% 100%;\n animation: kp-sk-shimmer var(--kp-motion-duration-shimmer) ease-in-out infinite;\n }\n\n /* Shapes */\n :host(.kp-sk--line) { border-radius: 4px; }\n :host(.kp-sk--circle) { border-radius: 50%; }\n :host(.kp-sk--rectangle) { border-radius: 8px; }\n :host(.kp-sk--button) { border-radius: var(--kp-sk-btn-radius, 12px); }\n\n /* Size ramp — used by line + circle + rectangle + button */\n :host(.kp-sk--line.kp-sk--xs) { height: 8px; }\n :host(.kp-sk--line.kp-sk--sm) { height: 12px; }\n :host(.kp-sk--line.kp-sk--md) { height: 16px; }\n :host(.kp-sk--line.kp-sk--lg) { height: 20px; }\n :host(.kp-sk--line.kp-sk--xl) { height: 24px; }\n\n :host(.kp-sk--circle.kp-sk--xs) { width: 24px; height: 24px; }\n :host(.kp-sk--circle.kp-sk--sm) { width: 32px; height: 32px; }\n :host(.kp-sk--circle.kp-sk--md) { width: 40px; height: 40px; }\n :host(.kp-sk--circle.kp-sk--lg) { width: 56px; height: 56px; }\n :host(.kp-sk--circle.kp-sk--xl) { width: 72px; height: 72px; }\n\n :host(.kp-sk--rectangle.kp-sk--xs) { width: 120px; height: 80px; }\n :host(.kp-sk--rectangle.kp-sk--sm) { width: 200px; height: 120px; }\n :host(.kp-sk--rectangle.kp-sk--md) { width: 320px; height: 200px; }\n :host(.kp-sk--rectangle.kp-sk--lg) { width: 480px; height: 300px; }\n :host(.kp-sk--rectangle.kp-sk--xl) { width: 640px; height: 400px; }\n\n :host(.kp-sk--button.kp-sk--xs) { width: 80px; height: 24px; --kp-sk-btn-radius: 8px; }\n :host(.kp-sk--button.kp-sk--sm) { width: 96px; height: 28px; --kp-sk-btn-radius: 10px; }\n :host(.kp-sk--button.kp-sk--md) { width: 112px; height: 36px; --kp-sk-btn-radius: 12px; }\n :host(.kp-sk--button.kp-sk--lg) { width: 120px; height: 44px; --kp-sk-btn-radius: 14px; }\n :host(.kp-sk--button.kp-sk--xl) { width: 128px; height: 52px; --kp-sk-btn-radius: 16px; }\n\n /* Avatar composite */\n :host(.kp-sk--avatar) {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n background: transparent;\n animation: none;\n }\n .kp-sk__avatar-circle {\n display: block;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100));\n }\n .kp-sk__avatar-text { display: inline-flex; flex-direction: column; gap: 6px; }\n .kp-sk__line-80, .kp-sk__line-120 {\n display: block;\n height: 12px;\n border-radius: 4px;\n background: var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100));\n }\n .kp-sk__line-80 { width: 80px; }\n .kp-sk__line-120 { width: 120px; height: 14px; }\n\n :host(.kp-sk--avatar.kp-sk--animated) .kp-sk__avatar-circle,\n :host(.kp-sk--avatar.kp-sk--animated) .kp-sk__line-80,\n :host(.kp-sk--avatar.kp-sk--animated) .kp-sk__line-120 {\n background-image: linear-gradient(\n 90deg,\n var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100)) 0%,\n var(--kp-color-skeleton-bg-highlight, var(--kp-color-gray-200)) 50%,\n var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100)) 100%\n );\n background-size: 200% 100%;\n animation: kp-sk-shimmer var(--kp-motion-duration-shimmer) ease-in-out infinite;\n }\n\n /* Card composite */\n :host(.kp-sk--card) {\n display: inline-flex;\n flex-direction: column;\n gap: 12px;\n width: 320px;\n background: transparent;\n animation: none;\n }\n .kp-sk__card-img {\n display: block; width: 100%; height: 180px; border-radius: 8px;\n background: var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100));\n }\n .kp-sk__card-title {\n display: block; width: 70%; height: 16px; border-radius: 4px;\n background: var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100));\n }\n .kp-sk__card-line {\n display: block; width: 100%; height: 12px; border-radius: 4px;\n background: var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100));\n }\n .kp-sk__card-line-2 { width: 85%; }\n\n :host(.kp-sk--card.kp-sk--animated) .kp-sk__card-img,\n :host(.kp-sk--card.kp-sk--animated) .kp-sk__card-title,\n :host(.kp-sk--card.kp-sk--animated) .kp-sk__card-line {\n background-image: linear-gradient(\n 90deg,\n var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100)) 0%,\n var(--kp-color-skeleton-bg-highlight, var(--kp-color-gray-200)) 50%,\n var(--kp-color-skeleton-bg-base, var(--kp-color-gray-100)) 100%\n );\n background-size: 200% 100%;\n animation: kp-sk-shimmer var(--kp-motion-duration-shimmer) ease-in-out infinite;\n }\n `],\n})\nexport class KpSkeletonComponent {\n @Input() shape: KpSkeletonShape = 'line';\n @Input() size: KpSkeletonSize = 'md';\n @Input() animated = true;\n /** Override width — useful for line skeletons (e.g. '80%' or '240px'). */\n @Input() width: string | null = null;\n /** Override height when defaults don't fit. */\n @Input() height: string | null = null;\n\n get hostClasses(): string {\n const c = ['kp-sk', `kp-sk--${this.shape}`, `kp-sk--${this.size}`];\n if (this.animated) c.push('kp-sk--animated');\n return c.join(' ');\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAKA;;;;;;;;;;;AAWG;MAkKU,mBAAmB,CAAA;IACrB,KAAK,GAAoB,MAAM;IAC/B,IAAI,GAAmB,IAAI;IAC3B,QAAQ,GAAG,IAAI;;IAEf,KAAK,GAAkB,IAAI;;IAE3B,MAAM,GAAkB,IAAI;AAErC,IAAA,IAAI,WAAW,GAAA;AACb,QAAA,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,UAAU,IAAI,CAAC,KAAK,CAAA,CAAE,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,IAAI,CAAA,CAAE,CAAC;QAClE,IAAI,IAAI,CAAC,QAAQ;AAAE,YAAA,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC;AAC5C,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;IACpB;uGAbW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,IAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,KAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,aAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,aAAA,EAAA,OAAA,EAAA,cAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAvJpB;;;;;;;;;;;;;AAaT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,8pIAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FA0IU,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAjK/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,WACd,EAAE,EAAA,eAAA,EACM,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,SAAS,EAAE,aAAa;AACxB,wBAAA,oBAAoB,EAAE,QAAQ;AAC9B,wBAAA,eAAe,EAAE,OAAO;AACxB,wBAAA,gBAAgB,EAAE,QAAQ;qBAC3B,EAAA,QAAA,EACS;;;;;;;;;;;;;AAaT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,8pIAAA,CAAA,EAAA;;sBA2IA;;sBACA;;sBACA;;sBAEA;;sBAEA;;;ACzLH;;AAEG;;;;"}
|
package/package.json
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@kanso-protocol/skeleton",
|
|
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 — skeleton (component).",
|
|
11
|
+
"author": "GregNBlack",
|
|
12
|
+
"repository": {
|
|
13
|
+
"type": "git",
|
|
14
|
+
"url": "https://github.com/GregNBlack/kanso-protocol.git",
|
|
15
|
+
"directory": "packages/components/skeleton"
|
|
16
|
+
},
|
|
17
|
+
"homepage": "https://gregnblack.github.io/kanso-protocol/?path=/docs/components-skeleton--docs",
|
|
18
|
+
"bugs": "https://github.com/GregNBlack/kanso-protocol/issues",
|
|
19
|
+
"keywords": [
|
|
20
|
+
"design-system",
|
|
21
|
+
"angular",
|
|
22
|
+
"kanso",
|
|
23
|
+
"skeleton"
|
|
24
|
+
],
|
|
25
|
+
"sideEffects": false,
|
|
26
|
+
"module": "fesm2022/kanso-protocol-skeleton.mjs",
|
|
27
|
+
"typings": "types/kanso-protocol-skeleton.d.ts",
|
|
28
|
+
"exports": {
|
|
29
|
+
"./package.json": {
|
|
30
|
+
"default": "./package.json"
|
|
31
|
+
},
|
|
32
|
+
".": {
|
|
33
|
+
"types": "./types/kanso-protocol-skeleton.d.ts",
|
|
34
|
+
"default": "./fesm2022/kanso-protocol-skeleton.mjs"
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
"type": "module",
|
|
38
|
+
"dependencies": {
|
|
39
|
+
"tslib": "^2.3.0"
|
|
40
|
+
}
|
|
41
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
|
|
3
|
+
type KpSkeletonShape = 'line' | 'circle' | 'rectangle' | 'avatar' | 'button' | 'card';
|
|
4
|
+
type KpSkeletonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
5
|
+
/**
|
|
6
|
+
* Kanso Protocol — Skeleton
|
|
7
|
+
*
|
|
8
|
+
* Static placeholder shown while real content is loading. Six shape
|
|
9
|
+
* presets cover the common patterns (line, circle, rectangle, avatar,
|
|
10
|
+
* button, card) with a size ramp. `animated` toggles the shimmer
|
|
11
|
+
* gradient — on by default.
|
|
12
|
+
*
|
|
13
|
+
* Composition: project children for complex placeholders. For simple
|
|
14
|
+
* skeletons, just drop `<kp-skeleton shape="line" size="md"/>` and
|
|
15
|
+
* optionally override `[width]` to fit the real content width.
|
|
16
|
+
*/
|
|
17
|
+
declare class KpSkeletonComponent {
|
|
18
|
+
shape: KpSkeletonShape;
|
|
19
|
+
size: KpSkeletonSize;
|
|
20
|
+
animated: boolean;
|
|
21
|
+
/** Override width — useful for line skeletons (e.g. '80%' or '240px'). */
|
|
22
|
+
width: string | null;
|
|
23
|
+
/** Override height when defaults don't fit. */
|
|
24
|
+
height: string | null;
|
|
25
|
+
get hostClasses(): string;
|
|
26
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<KpSkeletonComponent, never>;
|
|
27
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<KpSkeletonComponent, "kp-skeleton", never, { "shape": { "alias": "shape"; "required": false; }; "size": { "alias": "size"; "required": false; }; "animated": { "alias": "animated"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, {}, never, never, true, never>;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export { KpSkeletonComponent };
|
|
31
|
+
export type { KpSkeletonShape, KpSkeletonSize };
|