@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/avatar.js DELETED
@@ -1,106 +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
- import { e } from './class-map-BmCohX9p.js';
4
- import './directive-Cuw6h7YA.js';
5
-
6
- var css_248z = i`* {
7
- box-sizing: border-box;
8
- }
9
-
10
- .screen-reader-only {
11
- display: none !important;
12
- }
13
-
14
- :host {
15
- display: inline-block;
16
- pointer-events: none;
17
- --avatar-size: 2rem;
18
- --avatar-background-color: var(--color-primary);
19
- --avatar-text-color: var(--color-on-primary);
20
- --avatar-border-radius: var(--global-avatar-border-radius);
21
- }
22
-
23
- .avatar-container {
24
- display: flex;
25
- align-items: center;
26
- gap: var(--spacing-050);
27
- line-height: 0;
28
- }
29
-
30
- .avatar {
31
- border-radius: var(--avatar-border-radius);
32
- display: flex;
33
- justify-content: center;
34
- align-items: center;
35
- color: var(--avatar-text-color);
36
- width: var(--avatar-size);
37
- height: var(--avatar-size);
38
- font-family: var(--typography-body-large-emphasized-font-family) !important;
39
- font-size: var(--typography-body-large-emphasized-font-size) !important;
40
- font-weight: var(--typography-body-large-emphasized-font-weight) !important;
41
- line-height: var(--typography-body-large-emphasized-line-height) !important;
42
- letter-spacing: var(--typography-body-large-emphasized-letter-spacing) !important;
43
- background-color: var(--avatar-background-color);
44
- font-size: calc(var(--avatar-size) * 0.5) !important;
45
- }
46
- .avatar .image {
47
- width: 100%;
48
- height: 100%;
49
- overflow: hidden;
50
- border-radius: inherit;
51
- }`;
52
-
53
- /**
54
- * @label Avatar
55
- * @tag base-avatar
56
- * @rawTag avatar
57
- * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
58
- *
59
- * @cssprop --avatar-border-radius - Controls the border radius of the avatar.
60
- * @cssprop --avatar-background-color - Controls the color of the avatar.
61
- * @cssprop --avatar-size - Controls the size of the avatar.
62
- * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.
63
- *
64
- *
65
- * @example
66
- * ```html
67
- * <base-avatar name="Shivaji Varma" src="https://peacock.redvars.com/assets/img/avatar.xs.webp" style='--avatar-size: 4rem'></base-avatar>
68
- * ```
69
- *
70
- * @tags display
71
- */
72
- class Avatar extends i$1 {
73
- constructor() {
74
- super(...arguments);
75
- this.name = '';
76
- }
77
- render() {
78
- return b `<div class="avatar-container">
79
- <div
80
- class=${e({
81
- avatar: true,
82
- initials: !this.src,
83
- image: !!this.src,
84
- })}
85
- >
86
- ${this.src
87
- ? b `<img class="image" src=${this.src} alt=${this.name} />`
88
- : b `<div class="initials">${this.__getInitials()}</div>`}
89
- </div>
90
- </div>`;
91
- }
92
- __getInitials() {
93
- const [first = '', last = ''] = this.name.split(' ');
94
- return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
95
- }
96
- }
97
- Avatar.styles = [css_248z];
98
- __decorate([
99
- n({ type: String, reflect: true })
100
- ], Avatar.prototype, "name", void 0);
101
- __decorate([
102
- n({ type: String, reflect: true })
103
- ], Avatar.prototype, "src", void 0);
104
-
105
- export { Avatar };
106
- //# sourceMappingURL=avatar.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"avatar.js","sources":["../../src/avatar/avatar.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './avatar.scss';\n\n/**\n * @label Avatar\n * @tag base-avatar\n * @rawTag avatar\n * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @cssprop --avatar-border-radius - Controls the border radius of the avatar.\n * @cssprop --avatar-background-color - Controls the color of the avatar.\n * @cssprop --avatar-size - Controls the size of the avatar.\n * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.\n *\n *\n * @example\n * ```html\n * <base-avatar name=\"Shivaji Varma\" src=\"https://peacock.redvars.com/assets/img/avatar.xs.webp\" style='--avatar-size: 4rem'></base-avatar>\n * ```\n *\n * @tags display\n */\nexport class Avatar extends LitElement {\n static styles = [styles];\n\n @property({ type: String, reflect: true }) name: string = '';\n\n @property({ type: String, reflect: true }) src?: string;\n\n render() {\n return html`<div class=\"avatar-container\">\n <div\n class=${classMap({\n avatar: true,\n initials: !this.src,\n image: !!this.src,\n })}\n >\n ${this.src\n ? html`<img class=\"image\" src=${this.src} alt=${this.name} />`\n : html`<div class=\"initials\">${this.__getInitials()}</div>`}\n </div>\n </div>`;\n }\n\n private __getInitials() {\n const [first = '', last = ''] = this.name.split(' ');\n return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();\n }\n}\n"],"names":["LitElement","html","classMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;;;;;;;;;;;;;;;AAkBG;AACG,MAAO,MAAO,SAAQA,GAAU,CAAA;AAAtC,IAAA,WAAA,GAAA;;QAG6C,IAAA,CAAA,IAAI,GAAW,EAAE;IAwB9D;IApBE,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,QAAQ,EAAE,CAAC,IAAI,CAAC,GAAG;AACnB,YAAA,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG;SAClB,CAAC;;AAEA,QAAA,EAAA,IAAI,CAAC;cACHD,CAAI,CAAA,CAAA,uBAAA,EAA0B,IAAI,CAAC,GAAG,CAAA,KAAA,EAAQ,IAAI,CAAC,IAAI,CAAA,GAAA;cACvDA,CAAI,CAAA,CAAA,sBAAA,EAAyB,IAAI,CAAC,aAAa,EAAE,CAAA,MAAA,CAAQ;;WAE1D;IACT;IAEQ,aAAa,GAAA;AACnB,QAAA,MAAM,CAAC,KAAK,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;AACpD,QAAA,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA,EAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,EAAE;IAC5D;;AAzBO,MAAA,CAAA,MAAM,GAAG,CAACE,QAAM,CAAC;AAEmB,UAAA,CAAA;IAA1CC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAoB,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAElB,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAe,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,KAAA,EAAA,MAAA,CAAA;;;;"}
package/dist/badge.js DELETED
@@ -1,84 +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
- import { e } from './class-map-BmCohX9p.js';
4
- import './directive-Cuw6h7YA.js';
5
-
6
- var css_248z = i`* {
7
- box-sizing: border-box;
8
- }
9
-
10
- .screen-reader-only {
11
- display: none !important;
12
- }
13
-
14
- :host {
15
- display: inline-block;
16
- --badge-color: var(--global-badge-color);
17
- z-index: var(--z-index-badge);
18
- }
19
-
20
- .badge {
21
- pointer-events: none;
22
- color: var(--color-white);
23
- display: flex;
24
- justify-content: center;
25
- align-items: center;
26
- background-color: var(--badge-color);
27
- border-radius: var(--shape-corner-full);
28
- }
29
- .badge.has-value {
30
- height: 1rem;
31
- min-width: 1rem;
32
- padding-inline: var(--spacing-050);
33
- font-family: var(--typography-label-small-font-family) !important;
34
- font-size: var(--typography-label-small-font-size) !important;
35
- font-weight: var(--typography-label-small-font-weight) !important;
36
- line-height: var(--typography-label-small-line-height) !important;
37
- letter-spacing: var(--typography-label-small-letter-spacing) !important;
38
- color: var(--color-on-error);
39
- }
40
- .badge:not(.has-value) {
41
- height: 0.375rem;
42
- width: 0.375rem;
43
- }`;
44
-
45
- /**
46
- * @label Badge
47
- * @tag base-badge
48
- * @rawTag badge
49
- * @summary The badge component is used to display a small amount of information to the user.
50
- *
51
- * @cssprop --badge-color - Controls the color of the badge.
52
- *
53
- * @example
54
- * ```html
55
- * <base-badge value="1"></base-badge>
56
- * ```
57
- * @tags display
58
- */
59
- class Badge extends i$1 {
60
- constructor() {
61
- super(...arguments);
62
- /**
63
- * The value to display in the badge.
64
- */
65
- this.value = '';
66
- }
67
- render() {
68
- return b `<div
69
- class=${e({
70
- badge: true,
71
- 'has-value': !!this.value,
72
- })}
73
- >
74
- ${this.value}
75
- </div>`;
76
- }
77
- }
78
- Badge.styles = [css_248z];
79
- __decorate([
80
- n({ type: String })
81
- ], Badge.prototype, "value", void 0);
82
-
83
- export { Badge };
84
- //# sourceMappingURL=badge.js.map
package/dist/badge.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"badge.js","sources":["../../src/badge/badge.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './badge.scss';\n\n/**\n * @label Badge\n * @tag base-badge\n * @rawTag badge\n * @summary The badge component is used to display a small amount of information to the user.\n *\n * @cssprop --badge-color - Controls the color of the badge.\n *\n * @example\n * ```html\n * <base-badge value=\"1\"></base-badge>\n * ```\n * @tags display\n */\nexport class Badge extends LitElement {\n static styles = [styles];\n\n /**\n * The value to display in the badge.\n */\n @property({ type: String }) value: string = '';\n\n render() {\n return html`<div\n class=${classMap({\n badge: true,\n 'has-value': !!this.value,\n })}\n >\n ${this.value}\n </div>`;\n }\n}\n"],"names":["LitElement","html","classMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;;;;;;;;;;AAaG;AACG,MAAO,KAAM,SAAQA,GAAU,CAAA;AAArC,IAAA,WAAA,GAAA;;AAGE;;AAEG;QACyB,IAAA,CAAA,KAAK,GAAW,EAAE;IAYhD;IAVE,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA;AACD,YAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,KAAK,EAAE,IAAI;AACX,YAAA,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;SAC1B,CAAC;;AAEA,MAAA,EAAA,IAAI,CAAC,KAAK;WACP;IACT;;AAhBO,KAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAKI,UAAA,CAAA;AAA3B,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAqB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;;;;"}
@@ -1,33 +0,0 @@
1
- import { _ as __decorate, n } from './property-DNVWDdPC.js';
2
- import { a as i } from './lit-element-CA46RFZ_.js';
3
-
4
- class BaseProgress extends i {
5
- constructor() {
6
- super(...arguments);
7
- this.indeterminate = false;
8
- this.inline = false;
9
- }
10
- __getPercentageValue() {
11
- if (!this.value)
12
- return 0;
13
- return this.value;
14
- }
15
- }
16
- __decorate([
17
- n({ type: Number })
18
- ], BaseProgress.prototype, "value", void 0);
19
- __decorate([
20
- n({ type: Boolean })
21
- ], BaseProgress.prototype, "indeterminate", void 0);
22
- __decorate([
23
- n({ type: String })
24
- ], BaseProgress.prototype, "label", void 0);
25
- __decorate([
26
- n({ type: String, attribute: 'helper-text' })
27
- ], BaseProgress.prototype, "helperText", void 0);
28
- __decorate([
29
- n({ type: Boolean })
30
- ], BaseProgress.prototype, "inline", void 0);
31
-
32
- export { BaseProgress };
33
- //# sourceMappingURL=base-progress.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"base-progress.js","sources":["../../src/progress/base-progress.ts"],"sourcesContent":["import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nexport class BaseProgress extends LitElement {\n /** The current value. */\n @property({ type: Number }) value?: number;\n\n @property({ type: Boolean }) indeterminate = false;\n\n /** A label describing the progress bar. */\n @property({ type: String }) label?: string;\n\n @property({ type: String, attribute: 'helper-text' }) helperText?: string;\n\n @property({ type: Boolean }) inline = false;\n\n __getPercentageValue(): number {\n if (!this.value) return 0;\n return this.value;\n }\n}\n"],"names":["LitElement","property"],"mappings":";;;AAGM,MAAO,YAAa,SAAQA,CAAU,CAAA;AAA5C,IAAA,WAAA,GAAA;;QAI+B,IAAA,CAAA,aAAa,GAAG,KAAK;QAOrB,IAAA,CAAA,MAAM,GAAG,KAAK;IAM7C;IAJE,oBAAoB,GAAA;QAClB,IAAI,CAAC,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,CAAC;QACzB,OAAO,IAAI,CAAC,KAAK;IACnB;AACD;AAf6B,UAAA,CAAA;AAA3B,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAiB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAEd,UAAA,CAAA;AAA5B,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE;AAAwB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,eAAA,EAAA,MAAA,CAAA;AAGvB,UAAA,CAAA;AAA3B,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAiB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAEW,UAAA,CAAA;IAArDA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE;AAAsB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAE7C,UAAA,CAAA;AAA5B,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE;AAAiB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;;;;"}
@@ -1,160 +0,0 @@
1
- import { _ as __decorate, n } from './property-DNVWDdPC.js';
2
- import { A, i, a as i$1, b } from './lit-element-CA46RFZ_.js';
3
- import { r } from './state-CV1fRmOT.js';
4
- import { e } from './class-map-BmCohX9p.js';
5
- import './directive-Cuw6h7YA.js';
6
-
7
- /**
8
- * @license
9
- * Copyright 2018 Google LLC
10
- * SPDX-License-Identifier: BSD-3-Clause
11
- */const o=o=>o??A;
12
-
13
- var css_248z = i`* {
14
- box-sizing: border-box;
15
- }
16
-
17
- .screen-reader-only {
18
- display: none !important;
19
- }
20
-
21
- :host {
22
- display: contents;
23
- }
24
-
25
- .breadcrumb-item {
26
- display: inline-flex;
27
- align-items: center;
28
- font-family: var(--typography-body-medium-font-family) !important;
29
- font-size: var(--typography-body-medium-font-size) !important;
30
- font-weight: var(--typography-body-medium-font-weight) !important;
31
- line-height: var(--typography-body-medium-line-height) !important;
32
- letter-spacing: var(--typography-body-medium-letter-spacing) !important;
33
- }
34
-
35
- .breadcrumb-item.active {
36
- font-family: var(--typography-body-medium-emphasized-font-family) !important;
37
- font-size: var(--typography-body-medium-emphasized-font-size) !important;
38
- font-weight: var(--typography-body-medium-emphasized-font-weight) !important;
39
- line-height: var(--typography-body-medium-emphasized-line-height) !important;
40
- letter-spacing: var(--typography-body-medium-emphasized-letter-spacing) !important;
41
- color: var(--color-on-surface);
42
- }
43
-
44
- .breadcrumb-link {
45
- color: var(--color-primary);
46
- text-decoration: none;
47
- border-radius: var(--border-radius-050);
48
- transition: color 0.2s ease, text-decoration 0.2s ease;
49
- }
50
- .breadcrumb-link:hover {
51
- color: var(--color-primary);
52
- text-decoration: underline;
53
- }
54
- .breadcrumb-link:focus-visible {
55
- outline: 2px solid var(--color-primary);
56
- outline-offset: 2px;
57
- text-decoration: underline;
58
- }
59
- .breadcrumb-link:active {
60
- color: var(--color-primary);
61
- }
62
-
63
- .separator {
64
- display: inline-block;
65
- margin-left: var(--spacing-100);
66
- color: var(--color-outline);
67
- user-select: none;
68
- pointer-events: none;
69
- }`;
70
-
71
- /**
72
- * @label Breadcrumb Item
73
- * @tag breadcrumb-item
74
- * @rawTag breadcrumb-item
75
- * @summary A breadcrumb item component that represents a single item in a breadcrumb navigation.
76
- *
77
- * @example
78
- * ```html
79
- * <breadcrumb-item href="#">Home</breadcrumb-item>
80
- * ```
81
- * @tags navigation
82
- */
83
- class BreadcrumbItem extends i$1 {
84
- constructor() {
85
- super(...arguments);
86
- /**
87
- * Indicates if this is the active (current) breadcrumb item.
88
- */
89
- this.active = false;
90
- this.position = 1;
91
- }
92
- connectedCallback() {
93
- super.connectedCallback();
94
- this.calculatePosition();
95
- }
96
- calculatePosition() {
97
- // Calculate position by counting sibling breadcrumb items
98
- if (this.parentElement) {
99
- const items = Array.from(this.parentElement.querySelectorAll('p-breadcrumb-item'));
100
- this.position = items.indexOf(this) + 1;
101
- }
102
- }
103
- render() {
104
- return b `
105
- <li
106
- class=${e({ 'breadcrumb-item': true, active: this.active })}
107
- itemprop="itemListElement"
108
- itemscope
109
- itemtype="https://schema.org/ListItem"
110
- >
111
- ${this.active
112
- ? b `
113
- <span aria-current="page" itemprop="name">
114
- <slot></slot>
115
- </span>
116
- `
117
- : b `
118
- <a
119
- class="breadcrumb-link"
120
- itemprop="item"
121
- href=${o(this.href)}
122
- target=${o(this.target)}
123
- ${this.target === '_blank'
124
- ? b `rel="noopener noreferrer"`
125
- : A}
126
- >
127
- <span itemprop="name">
128
- <slot></slot>
129
- </span>
130
- </a>
131
- `}
132
- <meta itemprop="position" content=${String(this.position)} />
133
- ${this.separator
134
- ? b `<span class="separator" aria-hidden="true"
135
- >${this.separator}</span
136
- >`
137
- : A}
138
- </li>
139
- `;
140
- }
141
- }
142
- BreadcrumbItem.styles = [css_248z];
143
- __decorate([
144
- n({ reflect: true })
145
- ], BreadcrumbItem.prototype, "href", void 0);
146
- __decorate([
147
- n()
148
- ], BreadcrumbItem.prototype, "target", void 0);
149
- __decorate([
150
- n({ type: Boolean, reflect: true })
151
- ], BreadcrumbItem.prototype, "active", void 0);
152
- __decorate([
153
- n({ type: String })
154
- ], BreadcrumbItem.prototype, "separator", void 0);
155
- __decorate([
156
- r()
157
- ], BreadcrumbItem.prototype, "position", void 0);
158
-
159
- export { BreadcrumbItem };
160
- //# sourceMappingURL=breadcrumb-item.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"breadcrumb-item.js","sources":["../node_modules/lit-html/directives/if-defined.js","../../src/breadcrumb/breadcrumb-item/breadcrumb-item.ts"],"sourcesContent":["import{nothing as t}from\"../lit-html.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const o=o=>o??t;export{o as ifDefined};\n//# sourceMappingURL=if-defined.js.map\n","import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport styles from './breadcrumb-item.scss';\n\n/**\n * @label Breadcrumb Item\n * @tag breadcrumb-item\n * @rawTag breadcrumb-item\n * @summary A breadcrumb item component that represents a single item in a breadcrumb navigation.\n *\n * @example\n * ```html\n * <breadcrumb-item href=\"#\">Home</breadcrumb-item>\n * ```\n * @tags navigation\n */\nexport class BreadcrumbItem extends LitElement {\n static styles = [styles];\n\n /**\n * Hyperlink to navigate to on click.\n */\n @property({ reflect: true }) href?: string;\n\n /**\n * Sets or retrieves the window or frame at which to target content.\n */\n @property() target?: string;\n\n /**\n * Indicates if this is the active (current) breadcrumb item.\n */\n @property({ type: Boolean, reflect: true }) active = false;\n\n /**\n * Custom separator character. If not provided, default \"/\" is used.\n */\n @property({ type: String }) separator?: string;\n\n @state()\n private position = 1;\n\n connectedCallback() {\n super.connectedCallback();\n this.calculatePosition();\n }\n\n private calculatePosition() {\n // Calculate position by counting sibling breadcrumb items\n if (this.parentElement) {\n const items = Array.from(\n this.parentElement.querySelectorAll('p-breadcrumb-item'),\n );\n this.position = items.indexOf(this) + 1;\n }\n }\n\n render() {\n return html`\n <li\n class=${classMap({ 'breadcrumb-item': true, active: this.active })}\n itemprop=\"itemListElement\"\n itemscope\n itemtype=\"https://schema.org/ListItem\"\n >\n ${this.active\n ? html`\n <span aria-current=\"page\" itemprop=\"name\">\n <slot></slot>\n </span>\n `\n : html`\n <a\n class=\"breadcrumb-link\"\n itemprop=\"item\"\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n ${this.target === '_blank'\n ? html`rel=\"noopener noreferrer\"`\n : nothing}\n >\n <span itemprop=\"name\">\n <slot></slot>\n </span>\n </a>\n `}\n <meta itemprop=\"position\" content=${String(this.position)} />\n ${this.separator\n ? html`<span class=\"separator\" aria-hidden=\"true\"\n >${this.separator}</span\n >`\n : nothing}\n </li>\n `;\n }\n}\n"],"names":["t","LitElement","html","classMap","ifDefined","nothing","styles","property","state"],"mappings":";;;;;;AACA;AACA;AACA;AACA;AACA,GAAG,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAEA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACClB;;;;;;;;;;;AAWG;AACG,MAAO,cAAe,SAAQC,GAAU,CAAA;AAA9C,IAAA,WAAA,GAAA;;AAaE;;AAEG;QACyC,IAAA,CAAA,MAAM,GAAG,KAAK;QAQlD,IAAA,CAAA,QAAQ,GAAG,CAAC;IAuDtB;IArDE,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;QACzB,IAAI,CAAC,iBAAiB,EAAE;IAC1B;IAEQ,iBAAiB,GAAA;;AAEvB,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACtB,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CACzD;YACD,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;QACzC;IACF;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;;AAEC,cAAA,EAAAC,CAAQ,CAAC,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;;;;;AAKhE,QAAA,EAAA,IAAI,CAAC;cACHD,CAAI,CAAA;;;;AAIH,YAAA;cACDA,CAAI,CAAA;;;;AAIO,qBAAA,EAAAE,CAAS,CAAC,IAAI,CAAC,IAAI,CAAC;AAClB,uBAAA,EAAAA,CAAS,CAAC,IAAI,CAAC,MAAM,CAAC;kBAC7B,IAAI,CAAC,MAAM,KAAK;kBACdF,CAAI,CAAA,CAAA,yBAAA;AACN,kBAAEG,CAAO;;;;;;AAMd,YAAA,CAAA;AAC+B,0CAAA,EAAA,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;AACvD,QAAA,EAAA,IAAI,CAAC;cACHH,CAAI,CAAA,CAAA;AACC,eAAA,EAAA,IAAI,CAAC,SAAS,CAAA;AACjB,aAAA;AACJ,cAAEG,CAAO;;KAEd;IACH;;AA7EO,cAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAKK,UAAA,CAAA;AAA5B,IAAAC,CAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AAAgB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAK/B,UAAA,CAAA;AAAX,IAAAA,CAAQ;AAAmB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAKgB,UAAA,CAAA;IAA3CA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAiB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAK/B,UAAA,CAAA;AAA3B,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAqB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAGvC,UAAA,CAAA;AADP,IAAAC,CAAK;AACe,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;;;;","x_google_ignoreList":[0]}
@@ -1,84 +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`* {
5
- box-sizing: border-box;
6
- }
7
-
8
- .screen-reader-only {
9
- display: none !important;
10
- }
11
-
12
- :host {
13
- display: block;
14
- margin-bottom: var(--spacing-050);
15
- }
16
-
17
- .breadcrumb {
18
- width: 100%;
19
- }
20
-
21
- ol {
22
- display: flex;
23
- flex-wrap: wrap;
24
- align-items: center;
25
- margin: 0;
26
- padding: 0;
27
- list-style: none;
28
- }
29
-
30
- ::slotted(:not(:last-child))::after {
31
- display: inline-block;
32
- padding-right: var(--spacing-100);
33
- padding-left: var(--spacing-100);
34
- color: var(--color-outline);
35
- content: "/";
36
- user-select: none;
37
- pointer-events: none;
38
- }`;
39
-
40
- /**
41
- * @label Breadcrumb
42
- * @tag base-breadcrumb
43
- * @rawTag breadcrumb
44
- *
45
- * @summary A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or web application.
46
- * @overview
47
- * - Breadcrumbs provide a trail for users to follow back to the starting or entry point.
48
- * - They help users understand their current location within the site hierarchy.
49
- * - Follows WCAG 2.1 guidelines for accessible navigation landmarks.
50
- *
51
- * @example
52
- * ```html
53
- * <base-breadcrumb label="Breadcrumb">
54
- * <breadcrumb-item href="#">Home</breadcrumb-item>
55
- * <breadcrumb-item href="#">Category</breadcrumb-item>
56
- * <breadcrumb-item active>Current Page</breadcrumb-item>
57
- * </base-breadcrumb>
58
- * ```
59
- * @tags navigation
60
- */
61
- class Breadcrumb extends i$1 {
62
- constructor() {
63
- super(...arguments);
64
- /**
65
- * Accessible label for the breadcrumb navigation landmark.
66
- * @default "Breadcrumb"
67
- */
68
- this.label = 'Breadcrumb';
69
- }
70
- render() {
71
- return b `<nav aria-label=${this.label} class="breadcrumb">
72
- <ol>
73
- <slot></slot>
74
- </ol>
75
- </nav>`;
76
- }
77
- }
78
- Breadcrumb.styles = [css_248z];
79
- __decorate([
80
- n({ type: String })
81
- ], Breadcrumb.prototype, "label", void 0);
82
-
83
- export { Breadcrumb };
84
- //# sourceMappingURL=breadcrumb.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"breadcrumb.js","sources":["../../src/breadcrumb/breadcrumb/breadcrumb.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './breadcrumb.scss';\n\n/**\n * @label Breadcrumb\n * @tag base-breadcrumb\n * @rawTag breadcrumb\n *\n * @summary A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or web application.\n * @overview\n * - Breadcrumbs provide a trail for users to follow back to the starting or entry point.\n * - They help users understand their current location within the site hierarchy.\n * - Follows WCAG 2.1 guidelines for accessible navigation landmarks.\n *\n * @example\n * ```html\n * <base-breadcrumb label=\"Breadcrumb\">\n * <breadcrumb-item href=\"#\">Home</breadcrumb-item>\n * <breadcrumb-item href=\"#\">Category</breadcrumb-item>\n * <breadcrumb-item active>Current Page</breadcrumb-item>\n * </base-breadcrumb>\n * ```\n * @tags navigation\n */\nexport class Breadcrumb extends LitElement {\n static styles = [styles];\n\n /**\n * Accessible label for the breadcrumb navigation landmark.\n * @default \"Breadcrumb\"\n */\n @property({ type: String }) label = 'Breadcrumb';\n\n render() {\n return html`<nav aria-label=${this.label} class=\"breadcrumb\">\n <ol>\n <slot></slot>\n </ol>\n </nav>`;\n }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;AAoBG;AACG,MAAO,UAAW,SAAQA,GAAU,CAAA;AAA1C,IAAA,WAAA,GAAA;;AAGE;;;AAGG;QACyB,IAAA,CAAA,KAAK,GAAG,YAAY;IASlD;IAPE,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA,gBAAA,EAAmB,IAAI,CAAC,KAAK,CAAA;;;;WAIjC;IACT;;AAdO,UAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAMI,UAAA,CAAA;AAA3B,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAuB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;;;;"}