@sellmate/design-system 0.0.51 → 0.0.52
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.
- package/dist/cjs/sd-tag.cjs.entry.js +1 -1
- package/dist/cjs/sd-tag.entry.cjs.js.map +1 -1
- package/dist/collection/components/sd-tag/sd-tag.css +8 -0
- package/dist/components/sd-tag.js +1 -1
- package/dist/components/sd-tag.js.map +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/p-1ad40ed0.entry.js +2 -0
- package/dist/design-system/{p-b0f77793.entry.js.map → p-1ad40ed0.entry.js.map} +1 -1
- package/dist/design-system/sd-tag.entry.esm.js.map +1 -1
- package/dist/esm/sd-tag.entry.js +1 -1
- package/dist/esm/sd-tag.entry.js.map +1 -1
- package/hydrate/index.js +1 -1
- package/hydrate/index.mjs +1 -1
- package/package.json +95 -95
- package/dist/design-system/p-b0f77793.entry.js +0 -2
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-Bxead0A0.js');
|
|
4
4
|
|
|
5
|
-
const sdTagCss = ":host{display:inline-block}:host([full-width]){display:block}.sd-tag{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid transparent;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sd-tag--custom-color{background:var(--tag-bg-color);color:var(--tag-text-color)}.sd-tag--sm{padding:0 6px;font-size:11px;line-height:18px;height:20px;border-radius:4px}.sd-tag--md{padding:0 8px;font-size:12px;font-weight:700;line-height:20px;height:24px;border-radius:4px}.sd-tag--lg{padding:0 10px;font-size:14px;font-weight:700;line-height:24px;min-height:28px;border-radius:5px}.sd-tag--rounded.sd-tag--sm{border-radius:20px}.sd-tag--rounded.sd-tag--md{border-radius:20px}.sd-tag--rounded.sd-tag--lg{border-radius:15px}";
|
|
5
|
+
const sdTagCss = ":host{display:inline-block}:host([full-width]){display:block}.sd-tag{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid transparent;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sd-tag__content{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sd-tag--custom-color{background:var(--tag-bg-color);color:var(--tag-text-color)}.sd-tag--sm{padding:0 6px;font-size:11px;line-height:18px;height:20px;border-radius:4px}.sd-tag--md{padding:0 8px;font-size:12px;font-weight:700;line-height:20px;height:24px;border-radius:4px}.sd-tag--lg{padding:0 10px;font-size:14px;font-weight:700;line-height:24px;min-height:28px;border-radius:5px}.sd-tag--rounded.sd-tag--sm{border-radius:20px}.sd-tag--rounded.sd-tag--md{border-radius:20px}.sd-tag--rounded.sd-tag--lg{border-radius:15px}";
|
|
6
6
|
|
|
7
7
|
const TAG_COLORS = {
|
|
8
8
|
grey: 'bg-grey_20 text-grey_70',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-tag.entry.cjs.js","sources":["src/components/sd-tag/sd-tag.scss?tag=sd-tag&encapsulation=shadow","src/components/sd-tag/sd-tag.tsx"],"sourcesContent":[":host {\r\n display: inline-block;\r\n}\r\n\r\n:host([full-width]) {\r\n display: block;\r\n}\r\n\r\n.sd-tag {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n text-decoration: none;\r\n border: 1px solid transparent;\r\n border-radius: 4px;\r\n transition: all 0.2s ease-in-out;\r\n position: relative;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n -webkit-user-select: none;\r\n user-select: none;\r\n box-sizing: border-box;\r\n\r\n &--custom-color {\r\n background: var(--tag-bg-color);\r\n color: var(--tag-text-color);\r\n }\r\n\r\n &--sm {\r\n padding: 0 6px;\r\n font-size: 11px;\r\n line-height: 18px;\r\n height: 20px;\r\n border-radius: 4px;\r\n }\r\n &--md {\r\n padding: 0 8px;\r\n font-size: 12px;\r\n font-weight: 700;\r\n line-height: 20px;\r\n height: 24px;\r\n border-radius: 4px;\r\n }\r\n &--lg {\r\n padding: 0 10px;\r\n font-size: 14px;\r\n font-weight: 700;\r\n line-height: 24px;\r\n min-height: 28px;\r\n border-radius: 5px;\r\n }\r\n &--rounded {\r\n &.sd-tag--sm {\r\n border-radius: 20px;\r\n }\r\n &.sd-tag--md {\r\n border-radius: 20px;\r\n }\r\n &.sd-tag--lg {\r\n border-radius: 15px;\r\n }\r\n }\r\n}\r\n","import { Component, Prop, h, Element } from '@stencil/core';\r\n\r\nexport type TagColor =\r\n | 'grey'\r\n | 'red'\r\n | 'orange'\r\n | 'yellow'\r\n | 'green'\r\n | 'blue'\r\n | 'darkblue'\r\n | 'indigo';\r\n\r\nexport type TagSize = 'sm' | 'md' | 'lg';\r\n\r\nconst TAG_COLORS = {\r\n grey: 'bg-grey_20 text-grey_70',\r\n red: 'bg-red_15 text-red_70',\r\n orange: 'bg-orange_10 text-orange_65',\r\n yellow: 'bg-yellow_10 text-yellow_60',\r\n green: 'bg-green_15 text-green_70',\r\n blue: 'bg-brilliantblue_20 text-brilliantblue_75',\r\n darkblue: 'bg-oceanblue_15 text-oceanblue_70',\r\n indigo: 'bg-brilliantblue_10 text-brilliantblue_85',\r\n};\r\n\r\n@Component({\r\n tag: 'sd-tag',\r\n styleUrl: 'sd-tag.scss',\r\n shadow: true,\r\n})\r\nexport class SdTag {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() size: TagSize = 'md';\r\n @Prop() color: TagColor = 'grey';\r\n @Prop() rounded: boolean = false;\r\n @Prop() label: string = '';\r\n @Prop() bgColor?: string;\r\n @Prop() textColor?: string;\r\n\r\n private getTagClasses(): string {\r\n const classes = ['sd-tag', `sd-tag--${this.size}`];\r\n\r\n if (this.rounded) {\r\n classes.push('sd-tag--rounded');\r\n }\r\n\r\n if (this.color && !this.bgColor && !this.textColor) {\r\n classes.push(TAG_COLORS[this.color]);\r\n }\r\n\r\n if (this.bgColor || this.textColor) {\r\n classes.push('sd-tag--custom-color');\r\n }\r\n\r\n return classes.join(' ');\r\n }\r\n\r\n private renderContent() {\r\n return [\r\n <span class=\"sd-tag__content\">\r\n <slot>{this.label}</slot>\r\n </span>,\r\n ];\r\n }\r\n\r\n render() {\r\n const tagClasses = this.getTagClasses();\r\n\r\n return (\r\n <span\r\n class={tagClasses}\r\n style={{\r\n '--tag-bg-color': this.bgColor,\r\n '--tag-text-color': this.textColor,\r\n }}\r\n aria-label={this.label || 'tag'}\r\n >\r\n {this.renderContent()}\r\n </span>\r\n );\r\n }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,QAAQ,GAAG,
|
|
1
|
+
{"version":3,"file":"sd-tag.entry.cjs.js","sources":["src/components/sd-tag/sd-tag.scss?tag=sd-tag&encapsulation=shadow","src/components/sd-tag/sd-tag.tsx"],"sourcesContent":[":host {\r\n display: inline-block;\r\n}\r\n\r\n:host([full-width]) {\r\n display: block;\r\n}\r\n\r\n.sd-tag {\r\n display: inline-flex;\r\n width: 100%;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n text-decoration: none;\r\n border: 1px solid transparent;\r\n border-radius: 4px;\r\n transition: all 0.2s ease-in-out;\r\n position: relative;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n -webkit-user-select: none;\r\n user-select: none;\r\n box-sizing: border-box;\r\n\r\n &__content {\r\n display: inline-block;\r\n width: 100%;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n &--custom-color {\r\n background: var(--tag-bg-color);\r\n color: var(--tag-text-color);\r\n }\r\n\r\n &--sm {\r\n padding: 0 6px;\r\n font-size: 11px;\r\n line-height: 18px;\r\n height: 20px;\r\n border-radius: 4px;\r\n }\r\n &--md {\r\n padding: 0 8px;\r\n font-size: 12px;\r\n font-weight: 700;\r\n line-height: 20px;\r\n height: 24px;\r\n border-radius: 4px;\r\n }\r\n &--lg {\r\n padding: 0 10px;\r\n font-size: 14px;\r\n font-weight: 700;\r\n line-height: 24px;\r\n min-height: 28px;\r\n border-radius: 5px;\r\n }\r\n &--rounded {\r\n &.sd-tag--sm {\r\n border-radius: 20px;\r\n }\r\n &.sd-tag--md {\r\n border-radius: 20px;\r\n }\r\n &.sd-tag--lg {\r\n border-radius: 15px;\r\n }\r\n }\r\n}\r\n","import { Component, Prop, h, Element } from '@stencil/core';\r\n\r\nexport type TagColor =\r\n | 'grey'\r\n | 'red'\r\n | 'orange'\r\n | 'yellow'\r\n | 'green'\r\n | 'blue'\r\n | 'darkblue'\r\n | 'indigo';\r\n\r\nexport type TagSize = 'sm' | 'md' | 'lg';\r\n\r\nconst TAG_COLORS = {\r\n grey: 'bg-grey_20 text-grey_70',\r\n red: 'bg-red_15 text-red_70',\r\n orange: 'bg-orange_10 text-orange_65',\r\n yellow: 'bg-yellow_10 text-yellow_60',\r\n green: 'bg-green_15 text-green_70',\r\n blue: 'bg-brilliantblue_20 text-brilliantblue_75',\r\n darkblue: 'bg-oceanblue_15 text-oceanblue_70',\r\n indigo: 'bg-brilliantblue_10 text-brilliantblue_85',\r\n};\r\n\r\n@Component({\r\n tag: 'sd-tag',\r\n styleUrl: 'sd-tag.scss',\r\n shadow: true,\r\n})\r\nexport class SdTag {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() size: TagSize = 'md';\r\n @Prop() color: TagColor = 'grey';\r\n @Prop() rounded: boolean = false;\r\n @Prop() label: string = '';\r\n @Prop() bgColor?: string;\r\n @Prop() textColor?: string;\r\n\r\n private getTagClasses(): string {\r\n const classes = ['sd-tag', `sd-tag--${this.size}`];\r\n\r\n if (this.rounded) {\r\n classes.push('sd-tag--rounded');\r\n }\r\n\r\n if (this.color && !this.bgColor && !this.textColor) {\r\n classes.push(TAG_COLORS[this.color]);\r\n }\r\n\r\n if (this.bgColor || this.textColor) {\r\n classes.push('sd-tag--custom-color');\r\n }\r\n\r\n return classes.join(' ');\r\n }\r\n\r\n private renderContent() {\r\n return [\r\n <span class=\"sd-tag__content\">\r\n <slot>{this.label}</slot>\r\n </span>,\r\n ];\r\n }\r\n\r\n render() {\r\n const tagClasses = this.getTagClasses();\r\n\r\n return (\r\n <span\r\n class={tagClasses}\r\n style={{\r\n '--tag-bg-color': this.bgColor,\r\n '--tag-text-color': this.textColor,\r\n }}\r\n aria-label={this.label || 'tag'}\r\n >\r\n {this.renderContent()}\r\n </span>\r\n );\r\n }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,QAAQ,GAAG,u+BAAu+B;;ACcx/B,MAAM,UAAU,GAAG;AAClB,IAAA,IAAI,EAAE,yBAAyB;AAC/B,IAAA,GAAG,EAAE,uBAAuB;AAC5B,IAAA,MAAM,EAAE,6BAA6B;AACrC,IAAA,MAAM,EAAE,6BAA6B;AACrC,IAAA,KAAK,EAAE,2BAA2B;AAClC,IAAA,IAAI,EAAE,2CAA2C;AACjD,IAAA,QAAQ,EAAE,mCAAmC;AAC7C,IAAA,MAAM,EAAE,2CAA2C;CACnD;MAOY,KAAK,GAAA,MAAA;;;;;IAGT,IAAI,GAAY,IAAI;IACpB,KAAK,GAAa,MAAM;IACxB,OAAO,GAAY,KAAK;IACxB,KAAK,GAAW,EAAE;AAClB,IAAA,OAAO;AACP,IAAA,SAAS;IAET,aAAa,GAAA;QACpB,MAAM,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAW,QAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAC;AAElD,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC;;AAGhC,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnD,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;QAGrC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,EAAE;AACnC,YAAA,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC;;AAGrC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGjB,aAAa,GAAA;QACpB,OAAO;AACN,YAAAA,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC5BA,OAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,KAAK,CAAQ,CACnB;SACP;;IAGF,MAAM,GAAA;AACL,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE;AAEvC,QAAA,QACCA,OACC,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE;gBACN,gBAAgB,EAAE,IAAI,CAAC,OAAO;gBAC9B,kBAAkB,EAAE,IAAI,CAAC,SAAS;AAClC,aAAA,EAAA,YAAA,EACW,IAAI,CAAC,KAAK,IAAI,KAAK,EAAA,EAE9B,IAAI,CAAC,aAAa,EAAE,CACf;;;;;;;"}
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
.sd-tag {
|
|
10
10
|
display: inline-flex;
|
|
11
|
+
width: 100%;
|
|
11
12
|
align-items: center;
|
|
12
13
|
justify-content: center;
|
|
13
14
|
gap: 8px;
|
|
@@ -22,6 +23,13 @@
|
|
|
22
23
|
user-select: none;
|
|
23
24
|
box-sizing: border-box;
|
|
24
25
|
}
|
|
26
|
+
.sd-tag__content {
|
|
27
|
+
display: inline-block;
|
|
28
|
+
width: 100%;
|
|
29
|
+
overflow: hidden;
|
|
30
|
+
white-space: nowrap;
|
|
31
|
+
text-overflow: ellipsis;
|
|
32
|
+
}
|
|
25
33
|
.sd-tag--custom-color {
|
|
26
34
|
background: var(--tag-bg-color);
|
|
27
35
|
color: var(--tag-text-color);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h } from './p-TFWJruz2.js';
|
|
2
2
|
|
|
3
|
-
const sdTagCss = ":host{display:inline-block}:host([full-width]){display:block}.sd-tag{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid transparent;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sd-tag--custom-color{background:var(--tag-bg-color);color:var(--tag-text-color)}.sd-tag--sm{padding:0 6px;font-size:11px;line-height:18px;height:20px;border-radius:4px}.sd-tag--md{padding:0 8px;font-size:12px;font-weight:700;line-height:20px;height:24px;border-radius:4px}.sd-tag--lg{padding:0 10px;font-size:14px;font-weight:700;line-height:24px;min-height:28px;border-radius:5px}.sd-tag--rounded.sd-tag--sm{border-radius:20px}.sd-tag--rounded.sd-tag--md{border-radius:20px}.sd-tag--rounded.sd-tag--lg{border-radius:15px}";
|
|
3
|
+
const sdTagCss = ":host{display:inline-block}:host([full-width]){display:block}.sd-tag{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid transparent;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sd-tag__content{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sd-tag--custom-color{background:var(--tag-bg-color);color:var(--tag-text-color)}.sd-tag--sm{padding:0 6px;font-size:11px;line-height:18px;height:20px;border-radius:4px}.sd-tag--md{padding:0 8px;font-size:12px;font-weight:700;line-height:20px;height:24px;border-radius:4px}.sd-tag--lg{padding:0 10px;font-size:14px;font-weight:700;line-height:24px;min-height:28px;border-radius:5px}.sd-tag--rounded.sd-tag--sm{border-radius:20px}.sd-tag--rounded.sd-tag--md{border-radius:20px}.sd-tag--rounded.sd-tag--lg{border-radius:15px}";
|
|
4
4
|
|
|
5
5
|
const TAG_COLORS = {
|
|
6
6
|
grey: 'bg-grey_20 text-grey_70',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"sd-tag.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,
|
|
1
|
+
{"file":"sd-tag.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,u+BAAu+B;;ACcx/B,MAAM,UAAU,GAAG;AAClB,IAAA,IAAI,EAAE,yBAAyB;AAC/B,IAAA,GAAG,EAAE,uBAAuB;AAC5B,IAAA,MAAM,EAAE,6BAA6B;AACrC,IAAA,MAAM,EAAE,6BAA6B;AACrC,IAAA,KAAK,EAAE,2BAA2B;AAClC,IAAA,IAAI,EAAE,2CAA2C;AACjD,IAAA,QAAQ,EAAE,mCAAmC;AAC7C,IAAA,MAAM,EAAE,2CAA2C;CACnD;MAOYA,OAAK,iBAAAC,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;;;;;;;;;IAGT,IAAI,GAAY,IAAI;IACpB,KAAK,GAAa,MAAM;IACxB,OAAO,GAAY,KAAK;IACxB,KAAK,GAAW,EAAE;AAClB,IAAA,OAAO;AACP,IAAA,SAAS;IAET,aAAa,GAAA;QACpB,MAAM,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAW,QAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAC;AAElD,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC;;AAGhC,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnD,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;QAGrC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,EAAE;AACnC,YAAA,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC;;AAGrC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGjB,aAAa,GAAA;QACpB,OAAO;AACN,YAAA,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC5B,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,KAAK,CAAQ,CACnB;SACP;;IAGF,MAAM,GAAA;AACL,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE;AAEvC,QAAA,QACC,CACC,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE;gBACN,gBAAgB,EAAE,IAAI,CAAC,OAAO;gBAC9B,kBAAkB,EAAE,IAAI,CAAC,SAAS;AAClC,aAAA,EAAA,YAAA,EACW,IAAI,CAAC,KAAK,IAAI,KAAK,EAAA,EAE9B,IAAI,CAAC,aAAa,EAAE,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SdTag","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tag/sd-tag.scss?tag=sd-tag&encapsulation=shadow","src/components/sd-tag/sd-tag.tsx"],"sourcesContent":[":host {\r\n display: inline-block;\r\n}\r\n\r\n:host([full-width]) {\r\n display: block;\r\n}\r\n\r\n.sd-tag {\r\n display: inline-flex;\r\n width: 100%;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n text-decoration: none;\r\n border: 1px solid transparent;\r\n border-radius: 4px;\r\n transition: all 0.2s ease-in-out;\r\n position: relative;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n -webkit-user-select: none;\r\n user-select: none;\r\n box-sizing: border-box;\r\n\r\n &__content {\r\n display: inline-block;\r\n width: 100%;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n &--custom-color {\r\n background: var(--tag-bg-color);\r\n color: var(--tag-text-color);\r\n }\r\n\r\n &--sm {\r\n padding: 0 6px;\r\n font-size: 11px;\r\n line-height: 18px;\r\n height: 20px;\r\n border-radius: 4px;\r\n }\r\n &--md {\r\n padding: 0 8px;\r\n font-size: 12px;\r\n font-weight: 700;\r\n line-height: 20px;\r\n height: 24px;\r\n border-radius: 4px;\r\n }\r\n &--lg {\r\n padding: 0 10px;\r\n font-size: 14px;\r\n font-weight: 700;\r\n line-height: 24px;\r\n min-height: 28px;\r\n border-radius: 5px;\r\n }\r\n &--rounded {\r\n &.sd-tag--sm {\r\n border-radius: 20px;\r\n }\r\n &.sd-tag--md {\r\n border-radius: 20px;\r\n }\r\n &.sd-tag--lg {\r\n border-radius: 15px;\r\n }\r\n }\r\n}\r\n","import { Component, Prop, h, Element } from '@stencil/core';\r\n\r\nexport type TagColor =\r\n | 'grey'\r\n | 'red'\r\n | 'orange'\r\n | 'yellow'\r\n | 'green'\r\n | 'blue'\r\n | 'darkblue'\r\n | 'indigo';\r\n\r\nexport type TagSize = 'sm' | 'md' | 'lg';\r\n\r\nconst TAG_COLORS = {\r\n grey: 'bg-grey_20 text-grey_70',\r\n red: 'bg-red_15 text-red_70',\r\n orange: 'bg-orange_10 text-orange_65',\r\n yellow: 'bg-yellow_10 text-yellow_60',\r\n green: 'bg-green_15 text-green_70',\r\n blue: 'bg-brilliantblue_20 text-brilliantblue_75',\r\n darkblue: 'bg-oceanblue_15 text-oceanblue_70',\r\n indigo: 'bg-brilliantblue_10 text-brilliantblue_85',\r\n};\r\n\r\n@Component({\r\n tag: 'sd-tag',\r\n styleUrl: 'sd-tag.scss',\r\n shadow: true,\r\n})\r\nexport class SdTag {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() size: TagSize = 'md';\r\n @Prop() color: TagColor = 'grey';\r\n @Prop() rounded: boolean = false;\r\n @Prop() label: string = '';\r\n @Prop() bgColor?: string;\r\n @Prop() textColor?: string;\r\n\r\n private getTagClasses(): string {\r\n const classes = ['sd-tag', `sd-tag--${this.size}`];\r\n\r\n if (this.rounded) {\r\n classes.push('sd-tag--rounded');\r\n }\r\n\r\n if (this.color && !this.bgColor && !this.textColor) {\r\n classes.push(TAG_COLORS[this.color]);\r\n }\r\n\r\n if (this.bgColor || this.textColor) {\r\n classes.push('sd-tag--custom-color');\r\n }\r\n\r\n return classes.join(' ');\r\n }\r\n\r\n private renderContent() {\r\n return [\r\n <span class=\"sd-tag__content\">\r\n <slot>{this.label}</slot>\r\n </span>,\r\n ];\r\n }\r\n\r\n render() {\r\n const tagClasses = this.getTagClasses();\r\n\r\n return (\r\n <span\r\n class={tagClasses}\r\n style={{\r\n '--tag-bg-color': this.bgColor,\r\n '--tag-text-color': this.textColor,\r\n }}\r\n aria-label={this.label || 'tag'}\r\n >\r\n {this.renderContent()}\r\n </span>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,g as o,b as l}from"./p-ClyGLKUd.js";export{s as setNonce}from"./p-ClyGLKUd.js";var t=()=>{const o=import.meta.url;const l={};if(o!==""){l.resourcesUrl=new URL(".",o).href}return e(l)};t().then((async e=>{await o();return l([["p-3d78a7c7",[[772,"sd-table",{columns:[16],rows:[1040],selected:[1040],rowKey:[1,"row-key"],selectable:[4],resizable:[4],width:[1],height:[1],stickyHeader:[4,"sticky-header"],stickyColumn:[16],noDataLabel:[1,"no-data-label"],isLoading:[4,"is-loading"],pagination:[16],bodyCellRenderer:[16],useInternalPagination:[4,"use-internal-pagination"],useRowsPerPageSelect:[4,"use-rows-per-page-select"],rowsPerPageOption:[16],currentPage:[32],innerRows:[32],innerSelected:[32],columnWidths:[32],scrolledLeft:[32],scrolledRight:[32]},null,{columns:["handleColumnsChange"],rows:["handleRowsChange"],selected:["handleSelectedChange"],pagination:["handlePaginationChange"]}]]],["p-1e175d35",[[772,"sd-select-multiple",{value:[1040],label:[1],options:[1040],placeholder:[1],optionPlaceholder:[1,"option-placeholder"],width:[1],dropdownHeight:[1,"dropdown-height"],disabled:[4],clearable:[4],searchable:[4],useCheckbox:[4,"use-checkbox"],optionRenderer:[16],filteredOptions:[32],isOpen:[32],searchText:[32],itemIndex:[32],isScrolled:[32]},null,{value:["valueChanged"],options:["optionsChanged"],searchText:["searchTextChanged"],itemIndex:["itemIndexChanged"],isOpen:["isOpenChanged"]}]]],["p-74f12ea0",[[772,"sd-select-multiple-group",{value:[1040],label:[1],options:[1040],placeholder:[1],optionPlaceholder:[1,"option-placeholder"],width:[1],dropdownHeight:[1,"dropdown-height"],disabled:[4],clearable:[4],searchable:[4],useCheckbox:[4,"use-checkbox"],useAll:[4,"use-all"],allCheckedLabel:[1,"all-checked-label"],allCheckOptionLabel:[1,"all-check-option-label"],containerStyle:[16],triggerStyle:[16],dropdownStyle:[16],optionStyle:[16],labelStyle:[16],optionRenderer:[16],filteredOptions:[32],isOpen:[32],searchText:[32],itemIndex:[32],isScrolled:[32]},null,{value:["valueChanged"],options:["optionsChanged"],searchText:["searchTextChanged"],itemIndex:["itemIndexChanged"],isOpen:["isOpenChanged"]}]]],["p-8d6d225d",[[770,"sd-date-picker",{date:[1],label:[1],selectable:[16],disabled:[4],isOpen:[32],currentDate:[32],currentYear:[32],currentMonth:[32]}]]],["p-4e7bc094",[[770,"sd-date-range-picker",{date:[16],label:[1],selectable:[16],maxRange:[2,"max-range"],disabled:[4],isOpen:[32],dateRange:[32],hoverDate:[32],prevYear:[32],prevMonth:[32]}]]],["p-1efccd9d",[[769,"sd-popover",{show:[1028],placement:[513],color:[513],icon:[513],iconSize:[514,"icon-size"],label:[1],buttonSize:[513,"button-size"],buttonVariant:[513,"button-variant"],menuTitle:[513,"title"],messages:[16],buttons:[16],menuClass:[1,"menu-class"],noHover:[4,"no-hover"],useClose:[4,"use-close"],showPopover:[32],slotContent:[32]},null,{show:["watchShowHandler"]}]]],["p-b892a722",[[772,"sd-modal-card",{type:[1],system:[1],useCloseButton:[4,"use-close-button"],modalTitle:[1,"modal-title"],buttonFlexDirection:[1,"button-flex-direction"],buttonProps:[16],message:[16],modalClass:[1,"modal-class"]}]]],["p-c9b70553",[[770,"sd-badge",{size:[1],color:[1],label:[1]}]]],["p-bc905ded",[[772,"sd-card",{bordered:[4],class:[1]}]]],["p-7d14540d",[[768,"sd-progress",{type:[1],status:[1],percentage:[2],size:[2],strokeWidth:[2,"stroke-width"],label:[1]}]]],["p-
|
|
1
|
+
import{p as e,g as o,b as l}from"./p-ClyGLKUd.js";export{s as setNonce}from"./p-ClyGLKUd.js";var t=()=>{const o=import.meta.url;const l={};if(o!==""){l.resourcesUrl=new URL(".",o).href}return e(l)};t().then((async e=>{await o();return l([["p-3d78a7c7",[[772,"sd-table",{columns:[16],rows:[1040],selected:[1040],rowKey:[1,"row-key"],selectable:[4],resizable:[4],width:[1],height:[1],stickyHeader:[4,"sticky-header"],stickyColumn:[16],noDataLabel:[1,"no-data-label"],isLoading:[4,"is-loading"],pagination:[16],bodyCellRenderer:[16],useInternalPagination:[4,"use-internal-pagination"],useRowsPerPageSelect:[4,"use-rows-per-page-select"],rowsPerPageOption:[16],currentPage:[32],innerRows:[32],innerSelected:[32],columnWidths:[32],scrolledLeft:[32],scrolledRight:[32]},null,{columns:["handleColumnsChange"],rows:["handleRowsChange"],selected:["handleSelectedChange"],pagination:["handlePaginationChange"]}]]],["p-1e175d35",[[772,"sd-select-multiple",{value:[1040],label:[1],options:[1040],placeholder:[1],optionPlaceholder:[1,"option-placeholder"],width:[1],dropdownHeight:[1,"dropdown-height"],disabled:[4],clearable:[4],searchable:[4],useCheckbox:[4,"use-checkbox"],optionRenderer:[16],filteredOptions:[32],isOpen:[32],searchText:[32],itemIndex:[32],isScrolled:[32]},null,{value:["valueChanged"],options:["optionsChanged"],searchText:["searchTextChanged"],itemIndex:["itemIndexChanged"],isOpen:["isOpenChanged"]}]]],["p-74f12ea0",[[772,"sd-select-multiple-group",{value:[1040],label:[1],options:[1040],placeholder:[1],optionPlaceholder:[1,"option-placeholder"],width:[1],dropdownHeight:[1,"dropdown-height"],disabled:[4],clearable:[4],searchable:[4],useCheckbox:[4,"use-checkbox"],useAll:[4,"use-all"],allCheckedLabel:[1,"all-checked-label"],allCheckOptionLabel:[1,"all-check-option-label"],containerStyle:[16],triggerStyle:[16],dropdownStyle:[16],optionStyle:[16],labelStyle:[16],optionRenderer:[16],filteredOptions:[32],isOpen:[32],searchText:[32],itemIndex:[32],isScrolled:[32]},null,{value:["valueChanged"],options:["optionsChanged"],searchText:["searchTextChanged"],itemIndex:["itemIndexChanged"],isOpen:["isOpenChanged"]}]]],["p-8d6d225d",[[770,"sd-date-picker",{date:[1],label:[1],selectable:[16],disabled:[4],isOpen:[32],currentDate:[32],currentYear:[32],currentMonth:[32]}]]],["p-4e7bc094",[[770,"sd-date-range-picker",{date:[16],label:[1],selectable:[16],maxRange:[2,"max-range"],disabled:[4],isOpen:[32],dateRange:[32],hoverDate:[32],prevYear:[32],prevMonth:[32]}]]],["p-1efccd9d",[[769,"sd-popover",{show:[1028],placement:[513],color:[513],icon:[513],iconSize:[514,"icon-size"],label:[1],buttonSize:[513,"button-size"],buttonVariant:[513,"button-variant"],menuTitle:[513,"title"],messages:[16],buttons:[16],menuClass:[1,"menu-class"],noHover:[4,"no-hover"],useClose:[4,"use-close"],showPopover:[32],slotContent:[32]},null,{show:["watchShowHandler"]}]]],["p-b892a722",[[772,"sd-modal-card",{type:[1],system:[1],useCloseButton:[4,"use-close-button"],modalTitle:[1,"modal-title"],buttonFlexDirection:[1,"button-flex-direction"],buttonProps:[16],message:[16],modalClass:[1,"modal-class"]}]]],["p-c9b70553",[[770,"sd-badge",{size:[1],color:[1],label:[1]}]]],["p-bc905ded",[[772,"sd-card",{bordered:[4],class:[1]}]]],["p-7d14540d",[[768,"sd-progress",{type:[1],status:[1],percentage:[2],size:[2],strokeWidth:[2,"stroke-width"],label:[1]}]]],["p-1ad40ed0",[[769,"sd-tag",{size:[1],color:[1],rounded:[4],label:[1],bgColor:[1,"bg-color"],textColor:[1,"text-color"]}]]],["p-1b6aec43",[[772,"sd-td",{name:[1],align:[1],tdStyle:[16],tdClass:[1,"td-class"]}]]],["p-717a736c",[[772,"sd-table-backup",{columns:[16],rows:[1040],selected:[1040],rowKey:[1,"row-key"],selectable:[4],resizable:[4],width:[1],height:[1],stickyHeader:[4,"sticky-header"],stickyColumn:[16],noDataLabel:[1,"no-data-label"],isLoading:[4,"is-loading"],pagination:[16],headerCellRenderer:[16],bodyCellRenderer:[16],useInternalPagination:[4,"use-internal-pagination"],useRowsPerPageSelect:[4,"use-rows-per-page-select"],rowsPerPageOption:[16],useVirtualScroll:[16],virtualRowHeight:[2,"virtual-row-height"],virtualColumnWidth:[2,"virtual-column-width"],virtualBufferSize:[16],currentPage:[32],innerRows:[32],innerSelected:[32],columnWidths:[32],scrolledLeft:[32],scrolledRight:[32],virtualStartIndex:[32],virtualEndIndex:[32],scrollTopPosition:[32],virtualStartColIdx:[32],virtualEndColIdx:[32],scrollLeftPosition:[32]},null,{columns:["handleColumnsChange"],columnWidths:["handleColumnWidthsChange"],rows:["handleRowsChange"],selected:["handleSelectedChange"],pagination:["handlePaginationChange"]}],[768,"sd-guide",{type:[1],label:[1],message:[1],guideUrl:[1,"guide-url"],popupTitle:[1,"popup-title"],popupWidth:[2,"popup-width"],popupShow:[32]}],[768,"sd-radio-group",{value:[1544],radioOptions:[1040],direction:[1],disabled:[4],name:[1],selectedValue:[32]},null,{value:["valueChanged"]}],[768,"sd-toggle",{value:[1540],label:[1],disabled:[4],isChecked:[32]}],[256,"sd-loading-spinner"],[772,"sd-select",{value:[1032],label:[1],options:[1040],placeholder:[1],optionPlaceholder:[1,"option-placeholder"],width:[1],dropdownHeight:[1,"dropdown-height"],disabled:[4],clearable:[4],searchable:[4],optionRenderer:[16],filteredOptions:[32],isOpen:[32],searchText:[32],itemIndex:[32],isScrolled:[32]},null,{value:["valueChanged"],options:["optionsChanged"],searchText:["searchTextChanged"],itemIndex:["itemIndexChanged"],isOpen:["isOpenChanged"]}],[768,"sd-tooltip",{trigger:[1],placement:[1],color:[1],type:[1],icon:[1],iconSize:[2,"icon-size"],label:[1],buttonSize:[1,"button-size"],buttonVariant:[1,"button-variant"],noHover:[4,"no-hover"],useClose:[4,"use-close"],showTooltip:[32],slotContent:[32]}],[768,"sd-pagination",{currentPage:[2,"current-page"],lastPage:[2,"last-page"],simple:[4]}],[768,"sd-select-option",{option:[16],index:[2],isSelected:[4,"is-selected"],isFocused:[4,"is-focused"],optionStyle:[16],disabled:[4],useCheckbox:[4,"use-checkbox"],isHovered:[32],isDisabled:[64]}],[769,"sd-tooltip-portal",{to:[1],parentRef:[16],offset:[16],zIndex:[2,"z-index"],placement:[1],open:[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[768,"sd-button",{variant:[1],size:[1],color:[1],label:[1],disabled:[4],type:[1],icon:[1],iconColor:[1,"icon-color"],iconSize:[2,"icon-size"],iconRight:[1,"icon-right"],noHover:[4,"no-hover"],class:[1]}],[768,"sd-checkbox",{checked:[4],val:[8],disabled:[4],label:[1],isChecked:[32]},null,{checked:["watchValueHandler"]}],[772,"sd-input",{value:[1032],label:[1],placeholder:[1],disabled:[4],clearable:[4],width:[8],barcode:[4],rules:[16],autoFocus:[4,"auto-focus"],status:[1],inputClass:[1,"input-class"],readonly:[4],inputStyle:[16],internalValue:[32],error:[32],focused:[32],hovered:[32],getNativeElement:[64]},null,{value:["valueChanged"],internalValue:["internalValueChanged"]}],[772,"sd-portal",{to:[1],parentRef:[16],offset:[16],zIndex:[2,"z-index"],open:[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[768,"sd-icon",{name:[1],size:[8],color:[1],rotate:[2],label:[1],iconStyle:[16]}]]],["p-c7e8a2c0",[[768,"sd-select-option-group",{option:[16],index:[2],isSelected:[4,"is-selected"],isFocused:[4,"is-focused"],optionStyle:[16],disabled:[4],useCheckbox:[4,"use-checkbox"],useIndicator:[4,"use-indicator"],countInfo:[16],isHovered:[32],isDisabled:[64]}]]],["p-6d81e6f8",[[770,"sd-date-box",{date:[8],disabled:[4],selected:[4],isStartDate:[4,"is-start-date"],isEndDate:[4,"is-end-date"],isToday:[4,"is-today"],inRange:[4,"in-range"],type:[1]}]]],["p-4828e65b",[[260,"sd-tbody"],[260,"sd-th"],[260,"sd-tr"]]]],e)}));
|
|
2
2
|
//# sourceMappingURL=design-system.esm.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,a as e,h as s}from"./p-ClyGLKUd.js";const r=":host{display:inline-block}:host([full-width]){display:block}.sd-tag{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid transparent;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sd-tag__content{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sd-tag--custom-color{background:var(--tag-bg-color);color:var(--tag-text-color)}.sd-tag--sm{padding:0 6px;font-size:11px;line-height:18px;height:20px;border-radius:4px}.sd-tag--md{padding:0 8px;font-size:12px;font-weight:700;line-height:20px;height:24px;border-radius:4px}.sd-tag--lg{padding:0 10px;font-size:14px;font-weight:700;line-height:24px;min-height:28px;border-radius:5px}.sd-tag--rounded.sd-tag--sm{border-radius:20px}.sd-tag--rounded.sd-tag--md{border-radius:20px}.sd-tag--rounded.sd-tag--lg{border-radius:15px}";const o={grey:"bg-grey_20 text-grey_70",red:"bg-red_15 text-red_70",orange:"bg-orange_10 text-orange_65",yellow:"bg-yellow_10 text-yellow_60",green:"bg-green_15 text-green_70",blue:"bg-brilliantblue_20 text-brilliantblue_75",darkblue:"bg-oceanblue_15 text-oceanblue_70",indigo:"bg-brilliantblue_10 text-brilliantblue_85"};const i=class{constructor(e){t(this,e)}get el(){return e(this)}size="md";color="grey";rounded=false;label="";bgColor;textColor;getTagClasses(){const t=["sd-tag",`sd-tag--${this.size}`];if(this.rounded){t.push("sd-tag--rounded")}if(this.color&&!this.bgColor&&!this.textColor){t.push(o[this.color])}if(this.bgColor||this.textColor){t.push("sd-tag--custom-color")}return t.join(" ")}renderContent(){return[s("span",{class:"sd-tag__content"},s("slot",null,this.label))]}render(){const t=this.getTagClasses();return s("span",{key:"3ab30b01fbf0c25426e7903ed05372399c380a01",class:t,style:{"--tag-bg-color":this.bgColor,"--tag-text-color":this.textColor},"aria-label":this.label||"tag"},this.renderContent())}};i.style=r;export{i as sd_tag};
|
|
2
|
+
//# sourceMappingURL=p-1ad40ed0.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["registerInstance","getElement","h","sdTagCss","TAG_COLORS","grey","red","orange","yellow","green","blue","darkblue","indigo","SdTag","constructor","hostRef","this","el","size","color","rounded","label","bgColor","textColor","getTagClasses","classes","push","join","renderContent","class","render","tagClasses","key","style"],"sources":["0"],"mappings":"YAAcA,OAAuBC,OAAYC,MAAS,kBAE1D,MAAMC,EAAW,
|
|
1
|
+
{"version":3,"names":["registerInstance","getElement","h","sdTagCss","TAG_COLORS","grey","red","orange","yellow","green","blue","darkblue","indigo","SdTag","constructor","hostRef","this","el","size","color","rounded","label","bgColor","textColor","getTagClasses","classes","push","join","renderContent","class","render","tagClasses","key","style"],"sources":["0"],"mappings":"YAAcA,OAAuBC,OAAYC,MAAS,kBAE1D,MAAMC,EAAW,w+BAEjB,MAAMC,EAAa,CACfC,KAAM,0BACNC,IAAK,wBACLC,OAAQ,8BACRC,OAAQ,8BACRC,MAAO,4BACPC,KAAM,4CACNC,SAAU,oCACVC,OAAQ,6CAEZ,MAAMC,EAAQ,MACV,WAAAC,CAAYC,GACRf,EAAiBgB,KAAMD,EAC3B,CACA,MAAIE,GAAO,OAAOhB,EAAWe,KAAO,CACpCE,KAAO,KACPC,MAAQ,OACRC,QAAU,MACVC,MAAQ,GACRC,QACAC,UACA,aAAAC,GACI,MAAMC,EAAU,CAAC,SAAU,WAAWT,KAAKE,QAC3C,GAAIF,KAAKI,QAAS,CACdK,EAAQC,KAAK,kBACjB,CACA,GAAIV,KAAKG,QAAUH,KAAKM,UAAYN,KAAKO,UAAW,CAChDE,EAAQC,KAAKtB,EAAWY,KAAKG,OACjC,CACA,GAAIH,KAAKM,SAAWN,KAAKO,UAAW,CAChCE,EAAQC,KAAK,uBACjB,CACA,OAAOD,EAAQE,KAAK,IACxB,CACA,aAAAC,GACI,MAAO,CACH1B,EAAE,OAAQ,CAAE2B,MAAO,mBAAqB3B,EAAE,OAAQ,KAAMc,KAAKK,QAErE,CACA,MAAAS,GACI,MAAMC,EAAaf,KAAKQ,gBACxB,OAAQtB,EAAE,OAAQ,CAAE8B,IAAK,2CAA4CH,MAAOE,EAAYE,MAAO,CACvF,iBAAkBjB,KAAKM,QACvB,mBAAoBN,KAAKO,WAC1B,aAAcP,KAAKK,OAAS,OAASL,KAAKY,gBACrD,GAEJf,EAAMoB,MAAQ9B,SAELU","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-tag.entry.esm.js","sources":["src/components/sd-tag/sd-tag.scss?tag=sd-tag&encapsulation=shadow","src/components/sd-tag/sd-tag.tsx"],"sourcesContent":[":host {\r\n display: inline-block;\r\n}\r\n\r\n:host([full-width]) {\r\n display: block;\r\n}\r\n\r\n.sd-tag {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n text-decoration: none;\r\n border: 1px solid transparent;\r\n border-radius: 4px;\r\n transition: all 0.2s ease-in-out;\r\n position: relative;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n -webkit-user-select: none;\r\n user-select: none;\r\n box-sizing: border-box;\r\n\r\n &--custom-color {\r\n background: var(--tag-bg-color);\r\n color: var(--tag-text-color);\r\n }\r\n\r\n &--sm {\r\n padding: 0 6px;\r\n font-size: 11px;\r\n line-height: 18px;\r\n height: 20px;\r\n border-radius: 4px;\r\n }\r\n &--md {\r\n padding: 0 8px;\r\n font-size: 12px;\r\n font-weight: 700;\r\n line-height: 20px;\r\n height: 24px;\r\n border-radius: 4px;\r\n }\r\n &--lg {\r\n padding: 0 10px;\r\n font-size: 14px;\r\n font-weight: 700;\r\n line-height: 24px;\r\n min-height: 28px;\r\n border-radius: 5px;\r\n }\r\n &--rounded {\r\n &.sd-tag--sm {\r\n border-radius: 20px;\r\n }\r\n &.sd-tag--md {\r\n border-radius: 20px;\r\n }\r\n &.sd-tag--lg {\r\n border-radius: 15px;\r\n }\r\n }\r\n}\r\n","import { Component, Prop, h, Element } from '@stencil/core';\r\n\r\nexport type TagColor =\r\n | 'grey'\r\n | 'red'\r\n | 'orange'\r\n | 'yellow'\r\n | 'green'\r\n | 'blue'\r\n | 'darkblue'\r\n | 'indigo';\r\n\r\nexport type TagSize = 'sm' | 'md' | 'lg';\r\n\r\nconst TAG_COLORS = {\r\n grey: 'bg-grey_20 text-grey_70',\r\n red: 'bg-red_15 text-red_70',\r\n orange: 'bg-orange_10 text-orange_65',\r\n yellow: 'bg-yellow_10 text-yellow_60',\r\n green: 'bg-green_15 text-green_70',\r\n blue: 'bg-brilliantblue_20 text-brilliantblue_75',\r\n darkblue: 'bg-oceanblue_15 text-oceanblue_70',\r\n indigo: 'bg-brilliantblue_10 text-brilliantblue_85',\r\n};\r\n\r\n@Component({\r\n tag: 'sd-tag',\r\n styleUrl: 'sd-tag.scss',\r\n shadow: true,\r\n})\r\nexport class SdTag {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() size: TagSize = 'md';\r\n @Prop() color: TagColor = 'grey';\r\n @Prop() rounded: boolean = false;\r\n @Prop() label: string = '';\r\n @Prop() bgColor?: string;\r\n @Prop() textColor?: string;\r\n\r\n private getTagClasses(): string {\r\n const classes = ['sd-tag', `sd-tag--${this.size}`];\r\n\r\n if (this.rounded) {\r\n classes.push('sd-tag--rounded');\r\n }\r\n\r\n if (this.color && !this.bgColor && !this.textColor) {\r\n classes.push(TAG_COLORS[this.color]);\r\n }\r\n\r\n if (this.bgColor || this.textColor) {\r\n classes.push('sd-tag--custom-color');\r\n }\r\n\r\n return classes.join(' ');\r\n }\r\n\r\n private renderContent() {\r\n return [\r\n <span class=\"sd-tag__content\">\r\n <slot>{this.label}</slot>\r\n </span>,\r\n ];\r\n }\r\n\r\n render() {\r\n const tagClasses = this.getTagClasses();\r\n\r\n return (\r\n <span\r\n class={tagClasses}\r\n style={{\r\n '--tag-bg-color': this.bgColor,\r\n '--tag-text-color': this.textColor,\r\n }}\r\n aria-label={this.label || 'tag'}\r\n >\r\n {this.renderContent()}\r\n </span>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,
|
|
1
|
+
{"version":3,"file":"sd-tag.entry.esm.js","sources":["src/components/sd-tag/sd-tag.scss?tag=sd-tag&encapsulation=shadow","src/components/sd-tag/sd-tag.tsx"],"sourcesContent":[":host {\r\n display: inline-block;\r\n}\r\n\r\n:host([full-width]) {\r\n display: block;\r\n}\r\n\r\n.sd-tag {\r\n display: inline-flex;\r\n width: 100%;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n text-decoration: none;\r\n border: 1px solid transparent;\r\n border-radius: 4px;\r\n transition: all 0.2s ease-in-out;\r\n position: relative;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n -webkit-user-select: none;\r\n user-select: none;\r\n box-sizing: border-box;\r\n\r\n &__content {\r\n display: inline-block;\r\n width: 100%;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n &--custom-color {\r\n background: var(--tag-bg-color);\r\n color: var(--tag-text-color);\r\n }\r\n\r\n &--sm {\r\n padding: 0 6px;\r\n font-size: 11px;\r\n line-height: 18px;\r\n height: 20px;\r\n border-radius: 4px;\r\n }\r\n &--md {\r\n padding: 0 8px;\r\n font-size: 12px;\r\n font-weight: 700;\r\n line-height: 20px;\r\n height: 24px;\r\n border-radius: 4px;\r\n }\r\n &--lg {\r\n padding: 0 10px;\r\n font-size: 14px;\r\n font-weight: 700;\r\n line-height: 24px;\r\n min-height: 28px;\r\n border-radius: 5px;\r\n }\r\n &--rounded {\r\n &.sd-tag--sm {\r\n border-radius: 20px;\r\n }\r\n &.sd-tag--md {\r\n border-radius: 20px;\r\n }\r\n &.sd-tag--lg {\r\n border-radius: 15px;\r\n }\r\n }\r\n}\r\n","import { Component, Prop, h, Element } from '@stencil/core';\r\n\r\nexport type TagColor =\r\n | 'grey'\r\n | 'red'\r\n | 'orange'\r\n | 'yellow'\r\n | 'green'\r\n | 'blue'\r\n | 'darkblue'\r\n | 'indigo';\r\n\r\nexport type TagSize = 'sm' | 'md' | 'lg';\r\n\r\nconst TAG_COLORS = {\r\n grey: 'bg-grey_20 text-grey_70',\r\n red: 'bg-red_15 text-red_70',\r\n orange: 'bg-orange_10 text-orange_65',\r\n yellow: 'bg-yellow_10 text-yellow_60',\r\n green: 'bg-green_15 text-green_70',\r\n blue: 'bg-brilliantblue_20 text-brilliantblue_75',\r\n darkblue: 'bg-oceanblue_15 text-oceanblue_70',\r\n indigo: 'bg-brilliantblue_10 text-brilliantblue_85',\r\n};\r\n\r\n@Component({\r\n tag: 'sd-tag',\r\n styleUrl: 'sd-tag.scss',\r\n shadow: true,\r\n})\r\nexport class SdTag {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() size: TagSize = 'md';\r\n @Prop() color: TagColor = 'grey';\r\n @Prop() rounded: boolean = false;\r\n @Prop() label: string = '';\r\n @Prop() bgColor?: string;\r\n @Prop() textColor?: string;\r\n\r\n private getTagClasses(): string {\r\n const classes = ['sd-tag', `sd-tag--${this.size}`];\r\n\r\n if (this.rounded) {\r\n classes.push('sd-tag--rounded');\r\n }\r\n\r\n if (this.color && !this.bgColor && !this.textColor) {\r\n classes.push(TAG_COLORS[this.color]);\r\n }\r\n\r\n if (this.bgColor || this.textColor) {\r\n classes.push('sd-tag--custom-color');\r\n }\r\n\r\n return classes.join(' ');\r\n }\r\n\r\n private renderContent() {\r\n return [\r\n <span class=\"sd-tag__content\">\r\n <slot>{this.label}</slot>\r\n </span>,\r\n ];\r\n }\r\n\r\n render() {\r\n const tagClasses = this.getTagClasses();\r\n\r\n return (\r\n <span\r\n class={tagClasses}\r\n style={{\r\n '--tag-bg-color': this.bgColor,\r\n '--tag-text-color': this.textColor,\r\n }}\r\n aria-label={this.label || 'tag'}\r\n >\r\n {this.renderContent()}\r\n </span>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,u+BAAu+B;;ACcx/B,MAAM,UAAU,GAAG;AAClB,IAAA,IAAI,EAAE,yBAAyB;AAC/B,IAAA,GAAG,EAAE,uBAAuB;AAC5B,IAAA,MAAM,EAAE,6BAA6B;AACrC,IAAA,MAAM,EAAE,6BAA6B;AACrC,IAAA,KAAK,EAAE,2BAA2B;AAClC,IAAA,IAAI,EAAE,2CAA2C;AACjD,IAAA,QAAQ,EAAE,mCAAmC;AAC7C,IAAA,MAAM,EAAE,2CAA2C;CACnD;MAOY,KAAK,GAAA,MAAA;;;;;IAGT,IAAI,GAAY,IAAI;IACpB,KAAK,GAAa,MAAM;IACxB,OAAO,GAAY,KAAK;IACxB,KAAK,GAAW,EAAE;AAClB,IAAA,OAAO;AACP,IAAA,SAAS;IAET,aAAa,GAAA;QACpB,MAAM,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAW,QAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAC;AAElD,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC;;AAGhC,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnD,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;QAGrC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,EAAE;AACnC,YAAA,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC;;AAGrC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGjB,aAAa,GAAA;QACpB,OAAO;AACN,YAAA,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC5B,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,KAAK,CAAQ,CACnB;SACP;;IAGF,MAAM,GAAA;AACL,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE;AAEvC,QAAA,QACC,CACC,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE;gBACN,gBAAgB,EAAE,IAAI,CAAC,OAAO;gBAC9B,kBAAkB,EAAE,IAAI,CAAC,SAAS;AAClC,aAAA,EAAA,YAAA,EACW,IAAI,CAAC,KAAK,IAAI,KAAK,EAAA,EAE9B,IAAI,CAAC,aAAa,EAAE,CACf;;;;;;;"}
|
package/dist/esm/sd-tag.entry.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, a as getElement, h } from './index-ClyGLKUd.js';
|
|
2
2
|
|
|
3
|
-
const sdTagCss = ":host{display:inline-block}:host([full-width]){display:block}.sd-tag{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid transparent;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sd-tag--custom-color{background:var(--tag-bg-color);color:var(--tag-text-color)}.sd-tag--sm{padding:0 6px;font-size:11px;line-height:18px;height:20px;border-radius:4px}.sd-tag--md{padding:0 8px;font-size:12px;font-weight:700;line-height:20px;height:24px;border-radius:4px}.sd-tag--lg{padding:0 10px;font-size:14px;font-weight:700;line-height:24px;min-height:28px;border-radius:5px}.sd-tag--rounded.sd-tag--sm{border-radius:20px}.sd-tag--rounded.sd-tag--md{border-radius:20px}.sd-tag--rounded.sd-tag--lg{border-radius:15px}";
|
|
3
|
+
const sdTagCss = ":host{display:inline-block}:host([full-width]){display:block}.sd-tag{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid transparent;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sd-tag__content{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sd-tag--custom-color{background:var(--tag-bg-color);color:var(--tag-text-color)}.sd-tag--sm{padding:0 6px;font-size:11px;line-height:18px;height:20px;border-radius:4px}.sd-tag--md{padding:0 8px;font-size:12px;font-weight:700;line-height:20px;height:24px;border-radius:4px}.sd-tag--lg{padding:0 10px;font-size:14px;font-weight:700;line-height:24px;min-height:28px;border-radius:5px}.sd-tag--rounded.sd-tag--sm{border-radius:20px}.sd-tag--rounded.sd-tag--md{border-radius:20px}.sd-tag--rounded.sd-tag--lg{border-radius:15px}";
|
|
4
4
|
|
|
5
5
|
const TAG_COLORS = {
|
|
6
6
|
grey: 'bg-grey_20 text-grey_70',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-tag.entry.js","sources":["src/components/sd-tag/sd-tag.scss?tag=sd-tag&encapsulation=shadow","src/components/sd-tag/sd-tag.tsx"],"sourcesContent":[":host {\r\n display: inline-block;\r\n}\r\n\r\n:host([full-width]) {\r\n display: block;\r\n}\r\n\r\n.sd-tag {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n text-decoration: none;\r\n border: 1px solid transparent;\r\n border-radius: 4px;\r\n transition: all 0.2s ease-in-out;\r\n position: relative;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n -webkit-user-select: none;\r\n user-select: none;\r\n box-sizing: border-box;\r\n\r\n &--custom-color {\r\n background: var(--tag-bg-color);\r\n color: var(--tag-text-color);\r\n }\r\n\r\n &--sm {\r\n padding: 0 6px;\r\n font-size: 11px;\r\n line-height: 18px;\r\n height: 20px;\r\n border-radius: 4px;\r\n }\r\n &--md {\r\n padding: 0 8px;\r\n font-size: 12px;\r\n font-weight: 700;\r\n line-height: 20px;\r\n height: 24px;\r\n border-radius: 4px;\r\n }\r\n &--lg {\r\n padding: 0 10px;\r\n font-size: 14px;\r\n font-weight: 700;\r\n line-height: 24px;\r\n min-height: 28px;\r\n border-radius: 5px;\r\n }\r\n &--rounded {\r\n &.sd-tag--sm {\r\n border-radius: 20px;\r\n }\r\n &.sd-tag--md {\r\n border-radius: 20px;\r\n }\r\n &.sd-tag--lg {\r\n border-radius: 15px;\r\n }\r\n }\r\n}\r\n","import { Component, Prop, h, Element } from '@stencil/core';\r\n\r\nexport type TagColor =\r\n | 'grey'\r\n | 'red'\r\n | 'orange'\r\n | 'yellow'\r\n | 'green'\r\n | 'blue'\r\n | 'darkblue'\r\n | 'indigo';\r\n\r\nexport type TagSize = 'sm' | 'md' | 'lg';\r\n\r\nconst TAG_COLORS = {\r\n grey: 'bg-grey_20 text-grey_70',\r\n red: 'bg-red_15 text-red_70',\r\n orange: 'bg-orange_10 text-orange_65',\r\n yellow: 'bg-yellow_10 text-yellow_60',\r\n green: 'bg-green_15 text-green_70',\r\n blue: 'bg-brilliantblue_20 text-brilliantblue_75',\r\n darkblue: 'bg-oceanblue_15 text-oceanblue_70',\r\n indigo: 'bg-brilliantblue_10 text-brilliantblue_85',\r\n};\r\n\r\n@Component({\r\n tag: 'sd-tag',\r\n styleUrl: 'sd-tag.scss',\r\n shadow: true,\r\n})\r\nexport class SdTag {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() size: TagSize = 'md';\r\n @Prop() color: TagColor = 'grey';\r\n @Prop() rounded: boolean = false;\r\n @Prop() label: string = '';\r\n @Prop() bgColor?: string;\r\n @Prop() textColor?: string;\r\n\r\n private getTagClasses(): string {\r\n const classes = ['sd-tag', `sd-tag--${this.size}`];\r\n\r\n if (this.rounded) {\r\n classes.push('sd-tag--rounded');\r\n }\r\n\r\n if (this.color && !this.bgColor && !this.textColor) {\r\n classes.push(TAG_COLORS[this.color]);\r\n }\r\n\r\n if (this.bgColor || this.textColor) {\r\n classes.push('sd-tag--custom-color');\r\n }\r\n\r\n return classes.join(' ');\r\n }\r\n\r\n private renderContent() {\r\n return [\r\n <span class=\"sd-tag__content\">\r\n <slot>{this.label}</slot>\r\n </span>,\r\n ];\r\n }\r\n\r\n render() {\r\n const tagClasses = this.getTagClasses();\r\n\r\n return (\r\n <span\r\n class={tagClasses}\r\n style={{\r\n '--tag-bg-color': this.bgColor,\r\n '--tag-text-color': this.textColor,\r\n }}\r\n aria-label={this.label || 'tag'}\r\n >\r\n {this.renderContent()}\r\n </span>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,
|
|
1
|
+
{"version":3,"file":"sd-tag.entry.js","sources":["src/components/sd-tag/sd-tag.scss?tag=sd-tag&encapsulation=shadow","src/components/sd-tag/sd-tag.tsx"],"sourcesContent":[":host {\r\n display: inline-block;\r\n}\r\n\r\n:host([full-width]) {\r\n display: block;\r\n}\r\n\r\n.sd-tag {\r\n display: inline-flex;\r\n width: 100%;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n text-decoration: none;\r\n border: 1px solid transparent;\r\n border-radius: 4px;\r\n transition: all 0.2s ease-in-out;\r\n position: relative;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n -webkit-user-select: none;\r\n user-select: none;\r\n box-sizing: border-box;\r\n\r\n &__content {\r\n display: inline-block;\r\n width: 100%;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n &--custom-color {\r\n background: var(--tag-bg-color);\r\n color: var(--tag-text-color);\r\n }\r\n\r\n &--sm {\r\n padding: 0 6px;\r\n font-size: 11px;\r\n line-height: 18px;\r\n height: 20px;\r\n border-radius: 4px;\r\n }\r\n &--md {\r\n padding: 0 8px;\r\n font-size: 12px;\r\n font-weight: 700;\r\n line-height: 20px;\r\n height: 24px;\r\n border-radius: 4px;\r\n }\r\n &--lg {\r\n padding: 0 10px;\r\n font-size: 14px;\r\n font-weight: 700;\r\n line-height: 24px;\r\n min-height: 28px;\r\n border-radius: 5px;\r\n }\r\n &--rounded {\r\n &.sd-tag--sm {\r\n border-radius: 20px;\r\n }\r\n &.sd-tag--md {\r\n border-radius: 20px;\r\n }\r\n &.sd-tag--lg {\r\n border-radius: 15px;\r\n }\r\n }\r\n}\r\n","import { Component, Prop, h, Element } from '@stencil/core';\r\n\r\nexport type TagColor =\r\n | 'grey'\r\n | 'red'\r\n | 'orange'\r\n | 'yellow'\r\n | 'green'\r\n | 'blue'\r\n | 'darkblue'\r\n | 'indigo';\r\n\r\nexport type TagSize = 'sm' | 'md' | 'lg';\r\n\r\nconst TAG_COLORS = {\r\n grey: 'bg-grey_20 text-grey_70',\r\n red: 'bg-red_15 text-red_70',\r\n orange: 'bg-orange_10 text-orange_65',\r\n yellow: 'bg-yellow_10 text-yellow_60',\r\n green: 'bg-green_15 text-green_70',\r\n blue: 'bg-brilliantblue_20 text-brilliantblue_75',\r\n darkblue: 'bg-oceanblue_15 text-oceanblue_70',\r\n indigo: 'bg-brilliantblue_10 text-brilliantblue_85',\r\n};\r\n\r\n@Component({\r\n tag: 'sd-tag',\r\n styleUrl: 'sd-tag.scss',\r\n shadow: true,\r\n})\r\nexport class SdTag {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() size: TagSize = 'md';\r\n @Prop() color: TagColor = 'grey';\r\n @Prop() rounded: boolean = false;\r\n @Prop() label: string = '';\r\n @Prop() bgColor?: string;\r\n @Prop() textColor?: string;\r\n\r\n private getTagClasses(): string {\r\n const classes = ['sd-tag', `sd-tag--${this.size}`];\r\n\r\n if (this.rounded) {\r\n classes.push('sd-tag--rounded');\r\n }\r\n\r\n if (this.color && !this.bgColor && !this.textColor) {\r\n classes.push(TAG_COLORS[this.color]);\r\n }\r\n\r\n if (this.bgColor || this.textColor) {\r\n classes.push('sd-tag--custom-color');\r\n }\r\n\r\n return classes.join(' ');\r\n }\r\n\r\n private renderContent() {\r\n return [\r\n <span class=\"sd-tag__content\">\r\n <slot>{this.label}</slot>\r\n </span>,\r\n ];\r\n }\r\n\r\n render() {\r\n const tagClasses = this.getTagClasses();\r\n\r\n return (\r\n <span\r\n class={tagClasses}\r\n style={{\r\n '--tag-bg-color': this.bgColor,\r\n '--tag-text-color': this.textColor,\r\n }}\r\n aria-label={this.label || 'tag'}\r\n >\r\n {this.renderContent()}\r\n </span>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,u+BAAu+B;;ACcx/B,MAAM,UAAU,GAAG;AAClB,IAAA,IAAI,EAAE,yBAAyB;AAC/B,IAAA,GAAG,EAAE,uBAAuB;AAC5B,IAAA,MAAM,EAAE,6BAA6B;AACrC,IAAA,MAAM,EAAE,6BAA6B;AACrC,IAAA,KAAK,EAAE,2BAA2B;AAClC,IAAA,IAAI,EAAE,2CAA2C;AACjD,IAAA,QAAQ,EAAE,mCAAmC;AAC7C,IAAA,MAAM,EAAE,2CAA2C;CACnD;MAOY,KAAK,GAAA,MAAA;;;;;IAGT,IAAI,GAAY,IAAI;IACpB,KAAK,GAAa,MAAM;IACxB,OAAO,GAAY,KAAK;IACxB,KAAK,GAAW,EAAE;AAClB,IAAA,OAAO;AACP,IAAA,SAAS;IAET,aAAa,GAAA;QACpB,MAAM,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAW,QAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAC;AAElD,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC;;AAGhC,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnD,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;QAGrC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,EAAE;AACnC,YAAA,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC;;AAGrC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGjB,aAAa,GAAA;QACpB,OAAO;AACN,YAAA,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC5B,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,KAAK,CAAQ,CACnB;SACP;;IAGF,MAAM,GAAA;AACL,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE;AAEvC,QAAA,QACC,CACC,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE;gBACN,gBAAgB,EAAE,IAAI,CAAC,OAAO;gBAC9B,kBAAkB,EAAE,IAAI,CAAC,SAAS;AAClC,aAAA,EAAA,YAAA,EACW,IAAI,CAAC,KAAK,IAAI,KAAK,EAAA,EAE9B,IAAI,CAAC,aAAa,EAAE,CACf;;;;;;;"}
|
package/hydrate/index.js
CHANGED
|
@@ -9334,7 +9334,7 @@ class SdTable {
|
|
|
9334
9334
|
}; }
|
|
9335
9335
|
}
|
|
9336
9336
|
|
|
9337
|
-
const sdTagCss = ":host{display:inline-block}:host([full-width]){display:block}.sd-tag{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid transparent;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sd-tag--custom-color{background:var(--tag-bg-color);color:var(--tag-text-color)}.sd-tag--sm{padding:0 6px;font-size:11px;line-height:18px;height:20px;border-radius:4px}.sd-tag--md{padding:0 8px;font-size:12px;font-weight:700;line-height:20px;height:24px;border-radius:4px}.sd-tag--lg{padding:0 10px;font-size:14px;font-weight:700;line-height:24px;min-height:28px;border-radius:5px}.sd-tag--rounded.sd-tag--sm{border-radius:20px}.sd-tag--rounded.sd-tag--md{border-radius:20px}.sd-tag--rounded.sd-tag--lg{border-radius:15px}";
|
|
9337
|
+
const sdTagCss = ":host{display:inline-block}:host([full-width]){display:block}.sd-tag{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid transparent;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sd-tag__content{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sd-tag--custom-color{background:var(--tag-bg-color);color:var(--tag-text-color)}.sd-tag--sm{padding:0 6px;font-size:11px;line-height:18px;height:20px;border-radius:4px}.sd-tag--md{padding:0 8px;font-size:12px;font-weight:700;line-height:20px;height:24px;border-radius:4px}.sd-tag--lg{padding:0 10px;font-size:14px;font-weight:700;line-height:24px;min-height:28px;border-radius:5px}.sd-tag--rounded.sd-tag--sm{border-radius:20px}.sd-tag--rounded.sd-tag--md{border-radius:20px}.sd-tag--rounded.sd-tag--lg{border-radius:15px}";
|
|
9338
9338
|
|
|
9339
9339
|
const TAG_COLORS = {
|
|
9340
9340
|
grey: 'bg-grey_20 text-grey_70',
|
package/hydrate/index.mjs
CHANGED
|
@@ -9332,7 +9332,7 @@ class SdTable {
|
|
|
9332
9332
|
}; }
|
|
9333
9333
|
}
|
|
9334
9334
|
|
|
9335
|
-
const sdTagCss = ":host{display:inline-block}:host([full-width]){display:block}.sd-tag{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid transparent;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sd-tag--custom-color{background:var(--tag-bg-color);color:var(--tag-text-color)}.sd-tag--sm{padding:0 6px;font-size:11px;line-height:18px;height:20px;border-radius:4px}.sd-tag--md{padding:0 8px;font-size:12px;font-weight:700;line-height:20px;height:24px;border-radius:4px}.sd-tag--lg{padding:0 10px;font-size:14px;font-weight:700;line-height:24px;min-height:28px;border-radius:5px}.sd-tag--rounded.sd-tag--sm{border-radius:20px}.sd-tag--rounded.sd-tag--md{border-radius:20px}.sd-tag--rounded.sd-tag--lg{border-radius:15px}";
|
|
9335
|
+
const sdTagCss = ":host{display:inline-block}:host([full-width]){display:block}.sd-tag{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid transparent;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sd-tag__content{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sd-tag--custom-color{background:var(--tag-bg-color);color:var(--tag-text-color)}.sd-tag--sm{padding:0 6px;font-size:11px;line-height:18px;height:20px;border-radius:4px}.sd-tag--md{padding:0 8px;font-size:12px;font-weight:700;line-height:20px;height:24px;border-radius:4px}.sd-tag--lg{padding:0 10px;font-size:14px;font-weight:700;line-height:24px;min-height:28px;border-radius:5px}.sd-tag--rounded.sd-tag--sm{border-radius:20px}.sd-tag--rounded.sd-tag--md{border-radius:20px}.sd-tag--rounded.sd-tag--lg{border-radius:15px}";
|
|
9336
9336
|
|
|
9337
9337
|
const TAG_COLORS = {
|
|
9338
9338
|
grey: 'bg-grey_20 text-grey_70',
|
package/package.json
CHANGED
|
@@ -1,95 +1,95 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@sellmate/design-system",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "Sellmate Design System - Web Components Library built with Stencil",
|
|
5
|
-
"keywords": [
|
|
6
|
-
"web-components",
|
|
7
|
-
"stencil",
|
|
8
|
-
"design-system",
|
|
9
|
-
"ui-library"
|
|
10
|
-
],
|
|
11
|
-
"main": "dist/index.cjs.js",
|
|
12
|
-
"module": "dist/index.js",
|
|
13
|
-
"types": "dist/types/index.d.ts",
|
|
14
|
-
"collection": "dist/collection/collection-manifest.json",
|
|
15
|
-
"collection:main": "dist/collection/index.js",
|
|
16
|
-
"unpkg": "dist/design-system/design-system.esm.js",
|
|
17
|
-
"exports": {
|
|
18
|
-
".": {
|
|
19
|
-
"import": "./dist/design-system/design-system.esm.js",
|
|
20
|
-
"require": "./dist/design-system/design-system.cjs.js"
|
|
21
|
-
},
|
|
22
|
-
"./dist/components/*": "./dist/components/*",
|
|
23
|
-
"./loader": {
|
|
24
|
-
"import": "./loader/index.js",
|
|
25
|
-
"require": "./loader/index.cjs",
|
|
26
|
-
"types": "./loader/index.d.ts"
|
|
27
|
-
},
|
|
28
|
-
"./hydrate": {
|
|
29
|
-
"types": "./hydrate/index.d.ts",
|
|
30
|
-
"import": "./hydrate/index.mjs",
|
|
31
|
-
"require": "./hydrate/index.js",
|
|
32
|
-
"default": "./hydrate/index.js"
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
"repository": {
|
|
36
|
-
"type": "git",
|
|
37
|
-
"url": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system.git"
|
|
38
|
-
},
|
|
39
|
-
"homepage": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system/-/blob/main/README.md?ref_type=heads",
|
|
40
|
-
"bugs": {
|
|
41
|
-
"url": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system/-/issues"
|
|
42
|
-
},
|
|
43
|
-
"files": [
|
|
44
|
-
"dist/",
|
|
45
|
-
"loader/",
|
|
46
|
-
"hydrate/"
|
|
47
|
-
],
|
|
48
|
-
"scripts": {
|
|
49
|
-
"build": "stencil build",
|
|
50
|
-
"start": "stencil build --dev --watch --serve",
|
|
51
|
-
"test": "stencil test --spec --e2e",
|
|
52
|
-
"test.watch": "stencil test --spec --e2e --watchAll",
|
|
53
|
-
"generate": "stencil generate",
|
|
54
|
-
"storybook": "storybook dev -p 6006",
|
|
55
|
-
"build-storybook": "storybook build",
|
|
56
|
-
"chromatic": "npx chromatic --project-token=chpt_d022d502c83da77"
|
|
57
|
-
},
|
|
58
|
-
"devDependencies": {
|
|
59
|
-
"@chromatic-com/storybook": "^4.1.1",
|
|
60
|
-
"@stencil/core": "^4.39.0",
|
|
61
|
-
"@stencil/eslint-plugin": "^1.1.0",
|
|
62
|
-
"@stencil/sass": "^3.2.2",
|
|
63
|
-
"@storybook/addon-a11y": "^9.1.10",
|
|
64
|
-
"@storybook/addon-docs": "^9.1.10",
|
|
65
|
-
"@storybook/addon-vitest": "^9.1.10",
|
|
66
|
-
"@storybook/web-components-vite": "^9.1.10",
|
|
67
|
-
"@types/jest": "^29.5.14",
|
|
68
|
-
"@types/node": "^22.13.5",
|
|
69
|
-
"@types/react": "^19.2.2",
|
|
70
|
-
"@types/react-dom": "^19.2.2",
|
|
71
|
-
"chromatic": "^12.2.0",
|
|
72
|
-
"eslint": "^9.37.0",
|
|
73
|
-
"eslint-config-prettier": "^10.1.8",
|
|
74
|
-
"eslint-plugin-import": "^2.32.0",
|
|
75
|
-
"eslint-plugin-jsx-a11y": "^6.10.2",
|
|
76
|
-
"eslint-plugin-prettier": "^5.5.4",
|
|
77
|
-
"eslint-plugin-simple-import-sort": "^12.1.1",
|
|
78
|
-
"eslint-plugin-storybook": "^9.1.10",
|
|
79
|
-
"jest": "^29.7.0",
|
|
80
|
-
"jest-cli": "^29.7.0",
|
|
81
|
-
"puppeteer": "^24.3.0"
|
|
82
|
-
},
|
|
83
|
-
"license": "MIT",
|
|
84
|
-
"author": {
|
|
85
|
-
"name": "MeeKyeong Kim",
|
|
86
|
-
"email": "kmeijjing@gmail.com"
|
|
87
|
-
},
|
|
88
|
-
"publishConfig": {
|
|
89
|
-
"access": "public"
|
|
90
|
-
},
|
|
91
|
-
"dependencies": {
|
|
92
|
-
"@stencil/react-output-target": "^1.2.0",
|
|
93
|
-
"@stencil/vue-output-target": "^0.11.8"
|
|
94
|
-
}
|
|
95
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@sellmate/design-system",
|
|
3
|
+
"version": "0.0.52",
|
|
4
|
+
"description": "Sellmate Design System - Web Components Library built with Stencil",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"web-components",
|
|
7
|
+
"stencil",
|
|
8
|
+
"design-system",
|
|
9
|
+
"ui-library"
|
|
10
|
+
],
|
|
11
|
+
"main": "dist/index.cjs.js",
|
|
12
|
+
"module": "dist/index.js",
|
|
13
|
+
"types": "dist/types/index.d.ts",
|
|
14
|
+
"collection": "dist/collection/collection-manifest.json",
|
|
15
|
+
"collection:main": "dist/collection/index.js",
|
|
16
|
+
"unpkg": "dist/design-system/design-system.esm.js",
|
|
17
|
+
"exports": {
|
|
18
|
+
".": {
|
|
19
|
+
"import": "./dist/design-system/design-system.esm.js",
|
|
20
|
+
"require": "./dist/design-system/design-system.cjs.js"
|
|
21
|
+
},
|
|
22
|
+
"./dist/components/*": "./dist/components/*",
|
|
23
|
+
"./loader": {
|
|
24
|
+
"import": "./loader/index.js",
|
|
25
|
+
"require": "./loader/index.cjs",
|
|
26
|
+
"types": "./loader/index.d.ts"
|
|
27
|
+
},
|
|
28
|
+
"./hydrate": {
|
|
29
|
+
"types": "./hydrate/index.d.ts",
|
|
30
|
+
"import": "./hydrate/index.mjs",
|
|
31
|
+
"require": "./hydrate/index.js",
|
|
32
|
+
"default": "./hydrate/index.js"
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
"repository": {
|
|
36
|
+
"type": "git",
|
|
37
|
+
"url": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system.git"
|
|
38
|
+
},
|
|
39
|
+
"homepage": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system/-/blob/main/README.md?ref_type=heads",
|
|
40
|
+
"bugs": {
|
|
41
|
+
"url": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system/-/issues"
|
|
42
|
+
},
|
|
43
|
+
"files": [
|
|
44
|
+
"dist/",
|
|
45
|
+
"loader/",
|
|
46
|
+
"hydrate/"
|
|
47
|
+
],
|
|
48
|
+
"scripts": {
|
|
49
|
+
"build": "stencil build",
|
|
50
|
+
"start": "stencil build --dev --watch --serve",
|
|
51
|
+
"test": "stencil test --spec --e2e",
|
|
52
|
+
"test.watch": "stencil test --spec --e2e --watchAll",
|
|
53
|
+
"generate": "stencil generate",
|
|
54
|
+
"storybook": "storybook dev -p 6006",
|
|
55
|
+
"build-storybook": "storybook build",
|
|
56
|
+
"chromatic": "npx chromatic --project-token=chpt_d022d502c83da77"
|
|
57
|
+
},
|
|
58
|
+
"devDependencies": {
|
|
59
|
+
"@chromatic-com/storybook": "^4.1.1",
|
|
60
|
+
"@stencil/core": "^4.39.0",
|
|
61
|
+
"@stencil/eslint-plugin": "^1.1.0",
|
|
62
|
+
"@stencil/sass": "^3.2.2",
|
|
63
|
+
"@storybook/addon-a11y": "^9.1.10",
|
|
64
|
+
"@storybook/addon-docs": "^9.1.10",
|
|
65
|
+
"@storybook/addon-vitest": "^9.1.10",
|
|
66
|
+
"@storybook/web-components-vite": "^9.1.10",
|
|
67
|
+
"@types/jest": "^29.5.14",
|
|
68
|
+
"@types/node": "^22.13.5",
|
|
69
|
+
"@types/react": "^19.2.2",
|
|
70
|
+
"@types/react-dom": "^19.2.2",
|
|
71
|
+
"chromatic": "^12.2.0",
|
|
72
|
+
"eslint": "^9.37.0",
|
|
73
|
+
"eslint-config-prettier": "^10.1.8",
|
|
74
|
+
"eslint-plugin-import": "^2.32.0",
|
|
75
|
+
"eslint-plugin-jsx-a11y": "^6.10.2",
|
|
76
|
+
"eslint-plugin-prettier": "^5.5.4",
|
|
77
|
+
"eslint-plugin-simple-import-sort": "^12.1.1",
|
|
78
|
+
"eslint-plugin-storybook": "^9.1.10",
|
|
79
|
+
"jest": "^29.7.0",
|
|
80
|
+
"jest-cli": "^29.7.0",
|
|
81
|
+
"puppeteer": "^24.3.0"
|
|
82
|
+
},
|
|
83
|
+
"license": "MIT",
|
|
84
|
+
"author": {
|
|
85
|
+
"name": "MeeKyeong Kim",
|
|
86
|
+
"email": "kmeijjing@gmail.com"
|
|
87
|
+
},
|
|
88
|
+
"publishConfig": {
|
|
89
|
+
"access": "public"
|
|
90
|
+
},
|
|
91
|
+
"dependencies": {
|
|
92
|
+
"@stencil/react-output-target": "^1.2.0",
|
|
93
|
+
"@stencil/vue-output-target": "^0.11.8"
|
|
94
|
+
}
|
|
95
|
+
}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,a as e,h as r}from"./p-ClyGLKUd.js";const s=":host{display:inline-block}:host([full-width]){display:block}.sd-tag{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid transparent;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sd-tag--custom-color{background:var(--tag-bg-color);color:var(--tag-text-color)}.sd-tag--sm{padding:0 6px;font-size:11px;line-height:18px;height:20px;border-radius:4px}.sd-tag--md{padding:0 8px;font-size:12px;font-weight:700;line-height:20px;height:24px;border-radius:4px}.sd-tag--lg{padding:0 10px;font-size:14px;font-weight:700;line-height:24px;min-height:28px;border-radius:5px}.sd-tag--rounded.sd-tag--sm{border-radius:20px}.sd-tag--rounded.sd-tag--md{border-radius:20px}.sd-tag--rounded.sd-tag--lg{border-radius:15px}";const o={grey:"bg-grey_20 text-grey_70",red:"bg-red_15 text-red_70",orange:"bg-orange_10 text-orange_65",yellow:"bg-yellow_10 text-yellow_60",green:"bg-green_15 text-green_70",blue:"bg-brilliantblue_20 text-brilliantblue_75",darkblue:"bg-oceanblue_15 text-oceanblue_70",indigo:"bg-brilliantblue_10 text-brilliantblue_85"};const i=class{constructor(e){t(this,e)}get el(){return e(this)}size="md";color="grey";rounded=false;label="";bgColor;textColor;getTagClasses(){const t=["sd-tag",`sd-tag--${this.size}`];if(this.rounded){t.push("sd-tag--rounded")}if(this.color&&!this.bgColor&&!this.textColor){t.push(o[this.color])}if(this.bgColor||this.textColor){t.push("sd-tag--custom-color")}return t.join(" ")}renderContent(){return[r("span",{class:"sd-tag__content"},r("slot",null,this.label))]}render(){const t=this.getTagClasses();return r("span",{key:"3ab30b01fbf0c25426e7903ed05372399c380a01",class:t,style:{"--tag-bg-color":this.bgColor,"--tag-text-color":this.textColor},"aria-label":this.label||"tag"},this.renderContent())}};i.style=s;export{i as sd_tag};
|
|
2
|
-
//# sourceMappingURL=p-b0f77793.entry.js.map
|