@kanso-protocol/skeleton 3.0.2 → 4.0.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.
|
@@ -41,7 +41,7 @@ class KpSkeletonComponent {
|
|
|
41
41
|
<span class="kp-sk__card-line"></span>
|
|
42
42
|
<span class="kp-sk__card-line kp-sk__card-line-2"></span>
|
|
43
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);border-radius:4px;vertical-align:middle}:host(.kp-sk--animated){background-image:linear-gradient(90deg,var(--kp-color-skeleton-bg-base) 0%,var(--kp-color-skeleton-bg-highlight) 50%,var(--kp-color-skeleton-bg-base) 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)}.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)}.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) 0%,var(--kp-color-skeleton-bg-highlight) 50%,var(--kp-color-skeleton-bg-base) 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)}.kp-sk__card-title{display:block;width:70%;height:16px;border-radius:4px;background:var(--kp-color-skeleton-bg-base)}.kp-sk__card-line{display:block;width:100%;height:12px;border-radius:4px;background:var(--kp-color-skeleton-bg-base)}.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) 0%,var(--kp-color-skeleton-bg-highlight) 50%,var(--kp-color-skeleton-bg-base) 100%);background-size:200% 100%;animation:kp-sk-shimmer var(--kp-motion-duration-shimmer) ease-in-out infinite}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
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{box-sizing:border-box;display:inline-block;background:var(--kp-color-skeleton-bg-base);border-radius:4px;vertical-align:middle}:host(.kp-sk--animated){background-image:linear-gradient(90deg,var(--kp-color-skeleton-bg-base) 0%,var(--kp-color-skeleton-bg-highlight) 50%,var(--kp-color-skeleton-bg-base) 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)}.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)}.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) 0%,var(--kp-color-skeleton-bg-highlight) 50%,var(--kp-color-skeleton-bg-base) 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)}.kp-sk__card-title{display:block;width:70%;height:16px;border-radius:4px;background:var(--kp-color-skeleton-bg-base)}.kp-sk__card-line{display:block;width:100%;height:12px;border-radius:4px;background:var(--kp-color-skeleton-bg-base)}.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) 0%,var(--kp-color-skeleton-bg-highlight) 50%,var(--kp-color-skeleton-bg-base) 100%);background-size:200% 100%;animation:kp-sk-shimmer var(--kp-motion-duration-shimmer) ease-in-out infinite}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
45
45
|
}
|
|
46
46
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpSkeletonComponent, decorators: [{
|
|
47
47
|
type: Component,
|
|
@@ -63,7 +63,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
63
63
|
<span class="kp-sk__card-line"></span>
|
|
64
64
|
<span class="kp-sk__card-line kp-sk__card-line-2"></span>
|
|
65
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);border-radius:4px;vertical-align:middle}:host(.kp-sk--animated){background-image:linear-gradient(90deg,var(--kp-color-skeleton-bg-base) 0%,var(--kp-color-skeleton-bg-highlight) 50%,var(--kp-color-skeleton-bg-base) 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)}.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)}.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) 0%,var(--kp-color-skeleton-bg-highlight) 50%,var(--kp-color-skeleton-bg-base) 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)}.kp-sk__card-title{display:block;width:70%;height:16px;border-radius:4px;background:var(--kp-color-skeleton-bg-base)}.kp-sk__card-line{display:block;width:100%;height:12px;border-radius:4px;background:var(--kp-color-skeleton-bg-base)}.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) 0%,var(--kp-color-skeleton-bg-highlight) 50%,var(--kp-color-skeleton-bg-base) 100%);background-size:200% 100%;animation:kp-sk-shimmer var(--kp-motion-duration-shimmer) ease-in-out infinite}\n"] }]
|
|
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{box-sizing:border-box;display:inline-block;background:var(--kp-color-skeleton-bg-base);border-radius:4px;vertical-align:middle}:host(.kp-sk--animated){background-image:linear-gradient(90deg,var(--kp-color-skeleton-bg-base) 0%,var(--kp-color-skeleton-bg-highlight) 50%,var(--kp-color-skeleton-bg-base) 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)}.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)}.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) 0%,var(--kp-color-skeleton-bg-highlight) 50%,var(--kp-color-skeleton-bg-base) 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)}.kp-sk__card-title{display:block;width:70%;height:16px;border-radius:4px;background:var(--kp-color-skeleton-bg-base)}.kp-sk__card-line{display:block;width:100%;height:12px;border-radius:4px;background:var(--kp-color-skeleton-bg-base)}.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) 0%,var(--kp-color-skeleton-bg-highlight) 50%,var(--kp-color-skeleton-bg-base) 100%);background-size:200% 100%;animation:kp-sk-shimmer var(--kp-motion-duration-shimmer) ease-in-out infinite}\n"] }]
|
|
67
67
|
}], propDecorators: { shape: [{
|
|
68
68
|
type: Input
|
|
69
69
|
}], size: [{
|
|
@@ -1 +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);\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) 0%,\n var(--kp-color-skeleton-bg-highlight) 50%,\n var(--kp-color-skeleton-bg-base) 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);\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);\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) 0%,\n var(--kp-color-skeleton-bg-highlight) 50%,\n var(--kp-color-skeleton-bg-base) 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);\n }\n .kp-sk__card-title {\n display: block; width: 70%; height: 16px; border-radius: 4px;\n background: var(--kp-color-skeleton-bg-base);\n }\n .kp-sk__card-line {\n display: block; width: 100%; height: 12px; border-radius: 4px;\n background: var(--kp-color-skeleton-bg-base);\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) 0%,\n var(--kp-color-skeleton-bg-highlight) 50%,\n var(--kp-color-skeleton-bg-base) 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;
|
|
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 box-sizing: border-box;\n display: inline-block;\n background: var(--kp-color-skeleton-bg-base);\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) 0%,\n var(--kp-color-skeleton-bg-highlight) 50%,\n var(--kp-color-skeleton-bg-base) 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);\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);\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) 0%,\n var(--kp-color-skeleton-bg-highlight) 50%,\n var(--kp-color-skeleton-bg-base) 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);\n }\n .kp-sk__card-title {\n display: block; width: 70%; height: 16px; border-radius: 4px;\n background: var(--kp-color-skeleton-bg-base);\n }\n .kp-sk__card-line {\n display: block; width: 100%; height: 12px; border-radius: 4px;\n background: var(--kp-color-skeleton-bg-base);\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) 0%,\n var(--kp-color-skeleton-bg-highlight) 50%,\n var(--kp-color-skeleton-bg-base) 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;MAmKU,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,EAxJpB;;;;;;;;;;;;;AAaT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,8yHAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FA2IU,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAlK/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,8yHAAA,CAAA,EAAA;;sBA4IA;;sBACA;;sBACA;;sBAEA;;sBAEA;;;AC1LH;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kanso-protocol/skeleton",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
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": ">=
|
|
8
|
+
"@kanso-protocol/core": ">=4.0.0"
|
|
9
9
|
},
|
|
10
10
|
"description": "Kanso Protocol — skeleton (component).",
|
|
11
11
|
"author": "GregNBlack",
|