@redvars/peacock 3.2.7 → 3.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/dist/PeacockComponent-DMrFEGDh.js +80 -0
  2. package/dist/PeacockComponent-DMrFEGDh.js.map +1 -0
  3. package/dist/breadcrumb-item-DkhwoMAH.js +6879 -0
  4. package/dist/breadcrumb-item-DkhwoMAH.js.map +1 -0
  5. package/dist/button-BtpAXuLN.js +1180 -0
  6. package/dist/button-BtpAXuLN.js.map +1 -0
  7. package/dist/button-group.js +7 -6
  8. package/dist/button-group.js.map +1 -1
  9. package/dist/button.js +5 -0
  10. package/dist/button.js.map +1 -0
  11. package/dist/{class-map-BmCohX9p.js → class-map-CbncA34D.js} +2 -3
  12. package/dist/class-map-CbncA34D.js.map +1 -0
  13. package/dist/code-highlighter.js +9 -8
  14. package/dist/code-highlighter.js.map +1 -1
  15. package/dist/custom-elements.json +28 -0
  16. package/dist/index.js +87 -35
  17. package/dist/index.js.map +1 -1
  18. package/dist/number-counter.js +7 -6
  19. package/dist/number-counter.js.map +1 -1
  20. package/dist/peacock-loader.js +963 -38
  21. package/dist/peacock-loader.js.map +1 -1
  22. package/dist/src/PeacockComponent.d.ts +1 -0
  23. package/dist/{state-CV1fRmOT.js → state-CEVpI7Vv.js} +2 -2
  24. package/dist/{state-CV1fRmOT.js.map → state-CEVpI7Vv.js.map} +1 -1
  25. package/dist/{style-map-CdmclYgz.js → style-map-mOmZwsJT.js} +2 -3
  26. package/dist/style-map-mOmZwsJT.js.map +1 -0
  27. package/dist/tsconfig.tsbuildinfo +1 -1
  28. package/dist/{unsafe-html-BS8X6Gto.js → unsafe-html-Ca00SXpn.js} +2 -3
  29. package/dist/unsafe-html-Ca00SXpn.js.map +1 -0
  30. package/package.json +1 -1
  31. package/readme.md +2 -2
  32. package/src/PeacockComponent.ts +3 -0
  33. package/src/button/button/button.ts +3 -1
  34. package/src/button/button-group/button-group.ts +2 -0
  35. package/src/code-highlighter/code-highlighter.ts +2 -0
  36. package/src/number-counter/number-counter.ts +2 -0
  37. package/dist/BaseButton.js +0 -209
  38. package/dist/BaseButton.js.map +0 -1
  39. package/dist/BaseInput.js +0 -27
  40. package/dist/BaseInput.js.map +0 -1
  41. package/dist/accordion-item.js +0 -191
  42. package/dist/accordion-item.js.map +0 -1
  43. package/dist/accordion.js +0 -142
  44. package/dist/accordion.js.map +0 -1
  45. package/dist/avatar.js +0 -106
  46. package/dist/avatar.js.map +0 -1
  47. package/dist/badge.js +0 -84
  48. package/dist/badge.js.map +0 -1
  49. package/dist/base-progress.js +0 -33
  50. package/dist/base-progress.js.map +0 -1
  51. package/dist/breadcrumb-item.js +0 -160
  52. package/dist/breadcrumb-item.js.map +0 -1
  53. package/dist/breadcrumb.js +0 -84
  54. package/dist/breadcrumb.js.map +0 -1
  55. package/dist/checkbox.js +0 -530
  56. package/dist/checkbox.js.map +0 -1
  57. package/dist/chip.js +0 -303
  58. package/dist/chip.js.map +0 -1
  59. package/dist/class-map-BmCohX9p.js.map +0 -1
  60. package/dist/clock.js +0 -83
  61. package/dist/clock.js.map +0 -1
  62. package/dist/container.js +0 -135
  63. package/dist/container.js.map +0 -1
  64. package/dist/directive-Cuw6h7YA.js +0 -9
  65. package/dist/directive-Cuw6h7YA.js.map +0 -1
  66. package/dist/divider.js +0 -126
  67. package/dist/divider.js.map +0 -1
  68. package/dist/elevation.js +0 -79
  69. package/dist/elevation.js.map +0 -1
  70. package/dist/empty-state.js +0 -171
  71. package/dist/empty-state.js.map +0 -1
  72. package/dist/field.js +0 -416
  73. package/dist/field.js.map +0 -1
  74. package/dist/focus-ring.js +0 -107
  75. package/dist/focus-ring.js.map +0 -1
  76. package/dist/icon.js +0 -183
  77. package/dist/icon.js.map +0 -1
  78. package/dist/link.js +0 -91
  79. package/dist/link.js.map +0 -1
  80. package/dist/lit-element-CA46RFZ_.js +0 -28
  81. package/dist/lit-element-CA46RFZ_.js.map +0 -1
  82. package/dist/menu-item.js +0 -232
  83. package/dist/menu-item.js.map +0 -1
  84. package/dist/menu-list.js +0 -108
  85. package/dist/menu-list.js.map +0 -1
  86. package/dist/menu.js +0 -117
  87. package/dist/menu.js.map +0 -1
  88. package/dist/property-DNVWDdPC.js +0 -45
  89. package/dist/property-DNVWDdPC.js.map +0 -1
  90. package/dist/query-QBcUV-L_.js +0 -15
  91. package/dist/query-QBcUV-L_.js.map +0 -1
  92. package/dist/ripple.js +0 -128
  93. package/dist/ripple.js.map +0 -1
  94. package/dist/skeleton.js +0 -113
  95. package/dist/skeleton.js.map +0 -1
  96. package/dist/spinner.js +0 -93
  97. package/dist/spinner.js.map +0 -1
  98. package/dist/spread-axRTFMoH.js +0 -32
  99. package/dist/spread-axRTFMoH.js.map +0 -1
  100. package/dist/style-map-CdmclYgz.js.map +0 -1
  101. package/dist/switch-DqxIiVsB.js +0 -2738
  102. package/dist/switch-DqxIiVsB.js.map +0 -1
  103. package/dist/tag.js +0 -323
  104. package/dist/tag.js.map +0 -1
  105. package/dist/tooltip.js +0 -1857
  106. package/dist/tooltip.js.map +0 -1
  107. package/dist/unsafe-html-BS8X6Gto.js.map +0 -1
  108. package/dist/utils-DGMeCC48.js +0 -273
  109. package/dist/utils-DGMeCC48.js.map +0 -1
package/dist/ripple.js DELETED
@@ -1,128 +0,0 @@
1
- import { i, a as i$1, b } from './lit-element-CA46RFZ_.js';
2
-
3
- class Ripple extends i$1 {
4
- constructor() {
5
- super(...arguments);
6
- // Arrow function to bind 'this' automatically
7
- this._createRipple = (event) => {
8
- const parent = this.parentElement;
9
- if (!parent)
10
- return;
11
- const rect = parent.getBoundingClientRect();
12
- // 1. Calculate diameter (furthest corner)
13
- const diameter = Math.max(rect.width, rect.height) * 2.5;
14
- const radius = diameter / 2;
15
- // 2. Calculate position relative to the parent
16
- const x = event.clientX - rect.left;
17
- const y = event.clientY - rect.top;
18
- // 3. Create the ripple element
19
- // We create this manually to avoid triggering a full Lit render cycle
20
- // for a transient, fire-and-forget animation.
21
- const ripple = document.createElement('div');
22
- ripple.classList.add('ripple-effect');
23
- ripple.style.width = `${diameter}px`;
24
- ripple.style.height = `${diameter}px`;
25
- ripple.style.left = `${x - radius}px`;
26
- ripple.style.top = `${y - radius}px`;
27
- // 4. Append to Shadow DOM
28
- this.renderRoot.appendChild(ripple);
29
- // 5. Cleanup
30
- ripple.addEventListener('animationend', () => {
31
- ripple.remove();
32
- });
33
- };
34
- }
35
- connectedCallback() {
36
- super.connectedCallback();
37
- // We defer slightly to ensure the parent DOM is ready
38
- requestAnimationFrame(() => {
39
- this._setupParent();
40
- });
41
- }
42
- disconnectedCallback() {
43
- super.disconnectedCallback();
44
- if (this.parentElement) {
45
- this.parentElement.removeEventListener('pointerdown', this._createRipple);
46
- }
47
- }
48
- _setupParent() {
49
- const parent = this.parentElement;
50
- if (!parent)
51
- return;
52
- // 1. Force parent to be relative so we can position absolutely inside it
53
- const style = window.getComputedStyle(parent);
54
- if (style.position === 'static') {
55
- parent.style.position = 'relative';
56
- }
57
- // 2. Attach listener to the parent
58
- parent.addEventListener('pointerdown', this._createRipple);
59
- }
60
- render() {
61
- // No HTML needed in the template, we inject ripples dynamically
62
- return b `<div class="ripple"></div>`;
63
- }
64
- }
65
- Ripple.styles = i `
66
- :host {
67
- position: absolute;
68
- inset: 0; /* top/left/bottom/right: 0 */
69
- pointer-events: none; /* Let clicks pass through to parent */
70
- overflow: hidden;
71
- border-radius: inherit; /* Inherit parent's rounded corners */
72
- z-index: 0;
73
- --ripple-state-opacity: 0;
74
- --ripple-pressed-color: var(--color-on-surface);
75
- }
76
-
77
- .ripple:before {
78
- content: '';
79
- opacity: var(--ripple-state-opacity);
80
- pointer-events: none;
81
- position: absolute;
82
-
83
- background-color: var(--ripple-pressed-color);
84
- inset: 0;
85
- transition:
86
- opacity 15ms linear,
87
- background-color 15ms linear;
88
- }
89
-
90
- .ripple:after {
91
- content: '';
92
- opacity: var(--ripple-state-opacity);
93
- pointer-events: none;
94
- position: absolute;
95
- background: radial-gradient(
96
- closest-side,
97
- var(--ripple-pressed-color) max(100% - 70px, 65%),
98
- transparent 100%
99
- );
100
- transform-origin: center center;
101
- transition: opacity 375ms linear;
102
-
103
- width: 25px;
104
- top: 0px;
105
- transform: translate(51.4375px, 7.5px) scale(8.75941);
106
- left: 0px;
107
- height: 25px;
108
- }
109
-
110
- .ripple-effect {
111
- position: absolute;
112
- border-radius: 50%;
113
- background-color: var(--ripple-pressed-color);
114
- opacity: 0.12; /* Material 3 State Layer Opacity */
115
- transform: scale(0);
116
- animation: ripple-anim 600ms linear forwards;
117
- }
118
-
119
- @keyframes ripple-anim {
120
- to {
121
- transform: scale(1);
122
- opacity: 0;
123
- }
124
- }
125
- `;
126
-
127
- export { Ripple };
128
- //# sourceMappingURL=ripple.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ripple.js","sources":["../../src/ripple/ripple.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\n\nexport class Ripple extends LitElement {\n static styles = css`\n :host {\n position: absolute;\n inset: 0; /* top/left/bottom/right: 0 */\n pointer-events: none; /* Let clicks pass through to parent */\n overflow: hidden;\n border-radius: inherit; /* Inherit parent's rounded corners */\n z-index: 0;\n --ripple-state-opacity: 0;\n --ripple-pressed-color: var(--color-on-surface);\n }\n\n .ripple:before {\n content: '';\n opacity: var(--ripple-state-opacity);\n pointer-events: none;\n position: absolute;\n\n background-color: var(--ripple-pressed-color);\n inset: 0;\n transition:\n opacity 15ms linear,\n background-color 15ms linear;\n }\n\n .ripple:after {\n content: '';\n opacity: var(--ripple-state-opacity);\n pointer-events: none;\n position: absolute;\n background: radial-gradient(\n closest-side,\n var(--ripple-pressed-color) max(100% - 70px, 65%),\n transparent 100%\n );\n transform-origin: center center;\n transition: opacity 375ms linear;\n\n width: 25px;\n top: 0px;\n transform: translate(51.4375px, 7.5px) scale(8.75941);\n left: 0px;\n height: 25px;\n }\n\n .ripple-effect {\n position: absolute;\n border-radius: 50%;\n background-color: var(--ripple-pressed-color);\n opacity: 0.12; /* Material 3 State Layer Opacity */\n transform: scale(0);\n animation: ripple-anim 600ms linear forwards;\n }\n\n @keyframes ripple-anim {\n to {\n transform: scale(1);\n opacity: 0;\n }\n }\n `;\n\n connectedCallback() {\n super.connectedCallback();\n // We defer slightly to ensure the parent DOM is ready\n requestAnimationFrame(() => {\n this._setupParent();\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n if (this.parentElement) {\n this.parentElement.removeEventListener('pointerdown', this._createRipple);\n }\n }\n\n _setupParent() {\n const parent = this.parentElement;\n if (!parent) return;\n\n // 1. Force parent to be relative so we can position absolutely inside it\n const style = window.getComputedStyle(parent);\n if (style.position === 'static') {\n parent.style.position = 'relative';\n }\n\n // 2. Attach listener to the parent\n parent.addEventListener('pointerdown', this._createRipple);\n }\n\n // Arrow function to bind 'this' automatically\n _createRipple = (event: PointerEvent) => {\n const parent = this.parentElement;\n if (!parent) return;\n\n const rect = parent.getBoundingClientRect();\n\n // 1. Calculate diameter (furthest corner)\n const diameter = Math.max(rect.width, rect.height) * 2.5;\n const radius = diameter / 2;\n\n // 2. Calculate position relative to the parent\n const x = event.clientX - rect.left;\n const y = event.clientY - rect.top;\n\n // 3. Create the ripple element\n // We create this manually to avoid triggering a full Lit render cycle\n // for a transient, fire-and-forget animation.\n const ripple = document.createElement('div');\n ripple.classList.add('ripple-effect');\n\n ripple.style.width = `${diameter}px`;\n ripple.style.height = `${diameter}px`;\n ripple.style.left = `${x - radius}px`;\n ripple.style.top = `${y - radius}px`;\n\n // 4. Append to Shadow DOM\n this.renderRoot.appendChild(ripple);\n\n // 5. Cleanup\n ripple.addEventListener('animationend', () => {\n ripple.remove();\n });\n };\n\n render() {\n // No HTML needed in the template, we inject ripples dynamically\n return html`<div class=\"ripple\"></div>`;\n }\n}\n"],"names":["LitElement","html","css"],"mappings":";;AAEM,MAAO,MAAO,SAAQA,GAAU,CAAA;AAAtC,IAAA,WAAA,GAAA;;;AA6FE,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAmB,KAAI;AACtC,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa;AACjC,YAAA,IAAI,CAAC,MAAM;gBAAE;AAEb,YAAA,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE;;AAG3C,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG;AACxD,YAAA,MAAM,MAAM,GAAG,QAAQ,GAAG,CAAC;;YAG3B,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI;YACnC,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG;;;;YAKlC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC5C,YAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC;YAErC,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,CAAA,EAAG,QAAQ,IAAI;YACpC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,CAAA,EAAG,QAAQ,IAAI;YACrC,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,MAAM,CAAA,EAAA,CAAI;YACrC,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,MAAM,CAAA,EAAA,CAAI;;AAGpC,YAAA,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC;;AAGnC,YAAA,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,MAAK;gBAC3C,MAAM,CAAC,MAAM,EAAE;AACjB,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC;IAMH;IApEE,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;;QAEzB,qBAAqB,CAAC,MAAK;YACzB,IAAI,CAAC,YAAY,EAAE;AACrB,QAAA,CAAC,CAAC;IACJ;IAEA,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE;AAC5B,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC;QAC3E;IACF;IAEA,YAAY,GAAA;AACV,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa;AACjC,QAAA,IAAI,CAAC,MAAM;YAAE;;QAGb,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC;AAC7C,QAAA,IAAI,KAAK,CAAC,QAAQ,KAAK,QAAQ,EAAE;AAC/B,YAAA,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU;QACpC;;QAGA,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC;IAC5D;IAqCA,MAAM,GAAA;;QAEJ,OAAOC,CAAI,CAAA,CAAA,0BAAA,CAA4B;IACzC;;AAjIO,MAAA,CAAA,MAAM,GAAGC,CAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DlB,EAAA,CA5DY;;;;"}
package/dist/skeleton.js DELETED
@@ -1,113 +0,0 @@
1
- import { _ as __decorate, n } from './property-DNVWDdPC.js';
2
- import { i, a as i$1, b } from './lit-element-CA46RFZ_.js';
3
-
4
- var css_248z = i`:host {
5
- --skeleton-container-color: var(--color-surface-container);
6
- --skeleton-element: var(--color-on-surface);
7
- display: inline-block;
8
- height: 3rem;
9
- width: 10rem;
10
- }
11
-
12
- .skeleton {
13
- position: relative;
14
- padding: 0;
15
- border: none;
16
- background: var(--skeleton-container-color);
17
- box-shadow: none;
18
- overflow: hidden;
19
- pointer-events: none;
20
- width: 100%;
21
- height: 100%;
22
- border-start-start-radius: var(--skeleton-container-shape-start-start);
23
- border-start-end-radius: var(--skeleton-container-shape-start-end);
24
- border-end-start-radius: var(--skeleton-container-shape-end-start);
25
- border-end-end-radius: var(--skeleton-container-shape-end-end);
26
- corner-shape: var(--skeleton-container-shape-variant);
27
- }
28
- .skeleton::before {
29
- position: absolute;
30
- left: 0;
31
- top: 0;
32
- animation: 3s ease-in-out skeleton infinite;
33
- background: var(--skeleton-element);
34
- block-size: 100%;
35
- content: "";
36
- inline-size: 100%;
37
- will-change: transform-origin, transform, opacity;
38
- border-start-start-radius: var(--skeleton-container-shape-start-start);
39
- border-start-end-radius: var(--skeleton-container-shape-start-end);
40
- border-end-start-radius: var(--skeleton-container-shape-end-start);
41
- border-end-end-radius: var(--skeleton-container-shape-end-end);
42
- corner-shape: var(--skeleton-container-shape-variant);
43
- }
44
-
45
- @keyframes skeleton {
46
- 0% {
47
- opacity: 0.3;
48
- transform: scaleX(0);
49
- transform-origin: left;
50
- }
51
- 20% {
52
- opacity: 1;
53
- transform: scaleX(1);
54
- transform-origin: left;
55
- }
56
- 28% {
57
- transform: scaleX(1);
58
- transform-origin: right;
59
- }
60
- 51% {
61
- transform: scaleX(0);
62
- transform-origin: right;
63
- }
64
- 58% {
65
- transform: scaleX(0);
66
- transform-origin: right;
67
- }
68
- 82% {
69
- transform: scaleX(1);
70
- transform-origin: right;
71
- }
72
- 83% {
73
- transform: scaleX(1);
74
- transform-origin: left;
75
- }
76
- 96% {
77
- transform: scaleX(0);
78
- transform-origin: left;
79
- }
80
- 100% {
81
- opacity: 0.3;
82
- transform: scaleX(0);
83
- transform-origin: left;
84
- }
85
- }`;
86
-
87
- /**
88
- * @label Skeleton
89
- *
90
- * @tag base-skeleton
91
- * @rawTag skeleton
92
- *
93
- * @summary Adds a skeleton effect to an element.
94
- *
95
- *
96
- * @tags display
97
- */
98
- class Skeleton extends i$1 {
99
- constructor() {
100
- super(...arguments);
101
- this.visible = false;
102
- }
103
- render() {
104
- return b ` <div class="skeleton"></div>`;
105
- }
106
- }
107
- Skeleton.styles = [css_248z];
108
- __decorate([
109
- n({ type: Boolean, reflect: true })
110
- ], Skeleton.prototype, "visible", void 0);
111
-
112
- export { Skeleton };
113
- //# sourceMappingURL=skeleton.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"skeleton.js","sources":["../../src/skeleton/skeleton.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './skeleton.scss';\n\n/**\n * @label Skeleton\n *\n * @tag base-skeleton\n * @rawTag skeleton\n *\n * @summary Adds a skeleton effect to an element.\n *\n *\n * @tags display\n */\nexport class Skeleton extends LitElement {\n static styles = [styles];\n\n @property({ type: Boolean, reflect: true }) visible: boolean = false;\n\n render() {\n return html` <div class=\"skeleton\"></div>`;\n }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;;;;;;;;AAUG;AACG,MAAO,QAAS,SAAQA,GAAU,CAAA;AAAxC,IAAA,WAAA,GAAA;;QAG8C,IAAA,CAAA,OAAO,GAAY,KAAK;IAKtE;IAHE,MAAM,GAAA;QACJ,OAAOC,CAAI,CAAA,CAAA,6BAAA,CAA+B;IAC5C;;AANO,QAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAEoB,UAAA,CAAA;IAA3CC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAA2B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;;;;"}
package/dist/spinner.js DELETED
@@ -1,93 +0,0 @@
1
- import { i, a as i$1, b } from './lit-element-CA46RFZ_.js';
2
-
3
- var css_248z = i`* {
4
- box-sizing: border-box;
5
- }
6
-
7
- .screen-reader-only {
8
- display: none !important;
9
- }
10
-
11
- :host {
12
- display: inline-flex;
13
- --spinner-track-color: var(--color-primary-container);
14
- --spinner-shape-color: var(--color-primary);
15
- --spinner-size: 4rem;
16
- }
17
-
18
- .track {
19
- width: var(--spinner-size);
20
- height: var(--spinner-size);
21
- background-color: var(--spinner-track-color);
22
- border-radius: 50%;
23
- display: flex;
24
- justify-content: center;
25
- align-items: center;
26
- overflow: hidden;
27
- }
28
-
29
- .shape {
30
- width: 100%;
31
- height: 100%;
32
- background-color: var(--spinner-shape-color);
33
- animation: spinner-aniation 3s var(--easing-standard) infinite;
34
- }
35
-
36
- @keyframes spinner-aniation {
37
- 0%, 100% {
38
- clip-path: inset(0% round 50%);
39
- transform: rotate(0deg) scale(0.5);
40
- }
41
- 10% {
42
- transform: scale(0.7);
43
- }
44
- 20% {
45
- clip-path: inset(0% round 50%);
46
- transform: rotate(72deg) scale(0.6, 0.3);
47
- }
48
- 30% {
49
- transform: scale(0.5);
50
- }
51
- 40% {
52
- clip-path: inset(0% round 12px);
53
- transform: rotate(108deg) scale(0.3, 0.6);
54
- }
55
- 60% {
56
- transform: scale(0.5);
57
- }
58
- 80% {
59
- clip-path: inset(0% round 50%);
60
- transform: rotate(72deg) scale(0.6, 0.3);
61
- }
62
- 90% {
63
- transform: rotate(324deg) scale(0.4, 0.6);
64
- }
65
- }`;
66
-
67
- /**
68
- * @label Spinner
69
- * @tag base-spinner
70
- * @rawTag spinner
71
- * @summary A spinner component that animates a circular shape.
72
- * @cssprop --spinner-track-color - The color of the track.
73
- * @cssprop --spinner-shape-color - The color of the shape.
74
- * @tags display
75
- *
76
- * @example
77
- * ```html
78
- * <base-spinner></base-spinner>
79
- * ```
80
- */
81
- class Spinner extends i$1 {
82
- render() {
83
- return b `
84
- <div class="spinner track">
85
- <div class="shape"></div>
86
- </div>
87
- `;
88
- }
89
- }
90
- Spinner.styles = [css_248z];
91
-
92
- export { Spinner };
93
- //# sourceMappingURL=spinner.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"spinner.js","sources":["../../src/spinner/spinner.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\n\nimport styles from './spinner.scss';\n\n/**\n * @label Spinner\n * @tag base-spinner\n * @rawTag spinner\n * @summary A spinner component that animates a circular shape.\n * @cssprop --spinner-track-color - The color of the track.\n * @cssprop --spinner-shape-color - The color of the shape.\n * @tags display\n *\n * @example\n * ```html\n * <base-spinner></base-spinner>\n * ```\n */\nexport class Spinner extends LitElement {\n static styles = [styles];\n\n render() {\n return html`\n <div class=\"spinner track\">\n <div class=\"shape\"></div>\n </div>\n `;\n }\n}\n"],"names":["LitElement","html","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;;;;;;;;;;;AAaG;AACG,MAAO,OAAQ,SAAQA,GAAU,CAAA;IAGrC,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;;;;KAIV;IACH;;AARO,OAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;;;;"}
@@ -1,32 +0,0 @@
1
- import { e, i, t } from './directive-Cuw6h7YA.js';
2
-
3
- class SpreadDirective extends i {
4
- constructor(partInfo) {
5
- super(partInfo);
6
- if (partInfo.type !== t.ELEMENT) {
7
- throw new Error('spread() can only be used on elements');
8
- }
9
- }
10
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
11
- render(_props) {
12
- return '';
13
- }
14
- update(part, [props]) {
15
- if (!props)
16
- return;
17
- // eslint-disable-next-line guard-for-in,no-restricted-syntax
18
- for (const key in props) {
19
- const value = props[key];
20
- if (value === undefined || value === null) {
21
- part.element.removeAttribute(key);
22
- }
23
- else {
24
- part.element.setAttribute(key, value);
25
- }
26
- }
27
- }
28
- }
29
- const spread = e(SpreadDirective);
30
-
31
- export { spread as s };
32
- //# sourceMappingURL=spread-axRTFMoH.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"spread-axRTFMoH.js","sources":["../../src/spread.ts"],"sourcesContent":["import {\n directive,\n Directive,\n ElementPart,\n PartInfo,\n PartType,\n} from 'lit/directive.js';\n\nclass SpreadDirective extends Directive {\n constructor(partInfo: PartInfo) {\n super(partInfo);\n if (partInfo.type !== PartType.ELEMENT) {\n throw new Error('spread() can only be used on elements');\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n render(_props: { [key: string]: any } | undefined) {\n return '';\n }\n\n update(part: ElementPart, [props]: [{ [key: string]: any } | undefined]) {\n if (!props) return;\n // eslint-disable-next-line guard-for-in,no-restricted-syntax\n for (const key in props) {\n const value = props[key];\n if (value === undefined || value === null) {\n part.element.removeAttribute(key);\n } else {\n part.element.setAttribute(key, value);\n }\n }\n }\n}\n\nexport const spread = directive(SpreadDirective);\n"],"names":["Directive","PartType","directive"],"mappings":";;AAQA,MAAM,eAAgB,SAAQA,CAAS,CAAA;AACrC,IAAA,WAAA,CAAY,QAAkB,EAAA;QAC5B,KAAK,CAAC,QAAQ,CAAC;QACf,IAAI,QAAQ,CAAC,IAAI,KAAKC,CAAQ,CAAC,OAAO,EAAE;AACtC,YAAA,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC;QAC1D;IACF;;AAGA,IAAA,MAAM,CAAC,MAA0C,EAAA;AAC/C,QAAA,OAAO,EAAE;IACX;AAEA,IAAA,MAAM,CAAC,IAAiB,EAAE,CAAC,KAAK,CAAuC,EAAA;AACrE,QAAA,IAAI,CAAC,KAAK;YAAE;;AAEZ,QAAA,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE;AACvB,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC;YACxB,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,EAAE;AACzC,gBAAA,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,GAAG,CAAC;YACnC;iBAAO;gBACL,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC;YACvC;QACF;IACF;AACD;MAEY,MAAM,GAAGC,CAAS,CAAC,eAAe;;;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"style-map-CdmclYgz.js","sources":["../node_modules/lit-html/directives/style-map.js"],"sourcesContent":["import{noChange as t}from\"../lit-html.js\";import{directive as e,Directive as r,PartType as s}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const n=\"important\",i=\" !\"+n,o=e(class extends r{constructor(t){if(super(t),t.type!==s.ATTRIBUTE||\"style\"!==t.name||t.strings?.length>2)throw Error(\"The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.\")}render(t){return Object.keys(t).reduce((e,r)=>{const s=t[r];return null==s?e:e+`${r=r.includes(\"-\")?r:r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,\"-$&\").toLowerCase()}:${s};`},\"\")}update(e,[r]){const{style:s}=e.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(r)),this.render(r);for(const t of this.ft)null==r[t]&&(this.ft.delete(t),t.includes(\"-\")?s.removeProperty(t):s[t]=null);for(const t in r){const e=r[t];if(null!=e){this.ft.add(t);const r=\"string\"==typeof e&&e.endsWith(i);t.includes(\"-\")||r?s.setProperty(t,r?e.slice(0,-11):e,r?n:\"\"):s[t]=e}}return t}});export{o as styleMap};\n//# sourceMappingURL=style-map.js.map\n"],"names":["r","t","s"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAQ,MAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAcA,GAAC,CAAC,WAAW,CAACC,GAAC,CAAC,CAAC,GAAG,KAAK,CAACA,GAAC,CAAC,CAACA,GAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,SAAS,EAAE,OAAO,GAAGD,GAAC,CAAC,IAAI,EAAEA,GAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,4GAA4G,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,mCAAmC,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAC,CAAC,CAAC,OAAOA,CAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}