@sellmate/design-system 0.0.52 → 0.0.54

package/dist/esm/sd-tag.entry.js

@@ -1,55 +0,0 @@
-import { r as registerInstance, a as getElement, h } from './index-ClyGLKUd.js';
-
-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}";
-
-const TAG_COLORS = {
-    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 SdTag = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return getElement(this); }
-    size = 'md';
-    color = 'grey';
-    rounded = false;
-    label = '';
-    bgColor;
-    textColor;
-    getTagClasses() {
-        const classes = ['sd-tag', `sd-tag--${this.size}`];
-        if (this.rounded) {
-            classes.push('sd-tag--rounded');
-        }
-        if (this.color && !this.bgColor && !this.textColor) {
-            classes.push(TAG_COLORS[this.color]);
-        }
-        if (this.bgColor || this.textColor) {
-            classes.push('sd-tag--custom-color');
-        }
-        return classes.join(' ');
-    }
-    renderContent() {
-        return [
-            h("span", { class: "sd-tag__content" }, h("slot", null, this.label)),
-        ];
-    }
-    render() {
-        const tagClasses = this.getTagClasses();
-        return (h("span", { key: '3ab30b01fbf0c25426e7903ed05372399c380a01', class: tagClasses, style: {
-                '--tag-bg-color': this.bgColor,
-                '--tag-text-color': this.textColor,
-            }, "aria-label": this.label || 'tag' }, this.renderContent()));
-    }
-};
-SdTag.style = sdTagCss;
-
-export { SdTag as sd_tag };
-//# sourceMappingURL=sd-tag.entry.js.map

package/dist/esm/sd-tag.entry.js.map

@@ -1 +0,0 @@
-{"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/dist/esm/sd-tbody.sd-th.sd-tr.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sd-tbody.sd-th.sd-tr.entry.js","sources":["src/components/sd-table/sd-tbody/sd-tbody.scss?tag=sd-tbody","src/components/sd-table/sd-tbody/sd-tbody.tsx","src/components/sd-table/sd-th/sd-th.scss?tag=sd-th","src/components/sd-table/sd-th/sd-th.tsx","src/components/sd-table/sd-tr/sd-tr.scss?tag=sd-tr","src/components/sd-table/sd-tr/sd-tr.tsx"],"sourcesContent":["sd-tbody {\r\n display: table-row-group;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-tbody',\r\n styleUrl: 'sd-tbody.scss',\r\n})\r\nexport class SdTbody {\r\n render() {\r\n  return (\r\n   <Host>\r\n    <slot></slot>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n","sd-th {\r\n display: table-cell;\r\n padding: 12px;\r\n font-weight: bold;\r\n text-align: left;\r\n border-bottom: 2px solid #ddd;\r\n background-color: #f1f1f1;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-th',\r\n styleUrl: 'sd-th.scss',\r\n})\r\nexport class SdTh {\r\n render() {\r\n  return (\r\n   <Host role=\"columnheader\">\r\n    <slot></slot>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n","sd-tr {\r\n display: table-row;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-tr',\r\n styleUrl: 'sd-tr.scss',\r\n})\r\nexport class SdTr {\r\n render() {\r\n  return (\r\n   <Host role=\"row\">\r\n    <slot></slot>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,mCAAmC;;MCMzC,OAAO,GAAA,MAAA;;;;IACnB,MAAM,GAAA;QACL,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACP;;;;;ACXV,MAAM,OAAO,GAAG,+HAA+H;;MCMlI,IAAI,GAAA,MAAA;;;;IAChB,MAAM,GAAA;QACL,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAA,EACxB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACP;;;;;ACXV,MAAM,OAAO,GAAG,0BAA0B;;MCM7B,IAAI,GAAA,MAAA;;;;IAChB,MAAM,GAAA;QACL,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EAAA,EACf,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACP;;;;;;;"}