@verdocs/web-sdk 1.9.33 → 1.9.35

package/dist/esm-es5/verdocs-template-card.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/controls/verdocs-template-card/verdocs-template-card.scss?tag=verdocs-template-card","src/components/controls/verdocs-template-card/verdocs-template-card.tsx"],"names":["verdocsTemplateCardCss","VerdocsTemplateCard","prototype","render","h","Host","src","_b","_a","this","template","template_document","thumbnail_url","alt","class","name","_c","organization","innerHTML","StarIcon","star_counter","PagesIcon","_e","_d","page_numbers","EmailIcon","counter","ActionsIcon"],"mappings":"uoGAAA,IAAMA,uBAAyB,88CCelBC,oBAAmB,0EAM9BA,EAAAC,UAAAC,OAAA,yBACE,OACEC,EAACC,KAAI,KACHD,EAAA,MAAA,CAAKE,MAAKC,GAAAC,EAAAC,KAAKC,YAAQ,MAAAF,SAAA,OAAA,EAAAA,EAAEG,qBAAiB,MAAAJ,SAAA,OAAA,EAAAA,EAAEK,gBAAiB,GAAIC,IAAI,qBAAqBC,MAAM,cAEhGV,EAAA,OAAA,CAAMU,MAAM,QAAQL,KAAKC,SAASK,MAClCX,EAAA,OAAA,CAAMU,MAAM,cAAYE,EAAAP,KAAKC,SAASO,gBAAY,MAAAD,SAAA,OAAA,EAAAA,EAAED,OAAQ,UAE5DX,EAAA,KAAA,MAEAA,EAAA,MAAA,CAAKU,MAAM,YACTV,EAAA,MAAA,CAAKU,MAAM,WACTV,EAAA,OAAA,CAAMU,MAAM,OAAOI,UAAWC,WAC9Bf,EAAA,OAAA,CAAMU,MAAM,SAASL,KAAKC,SAASU,eAGrChB,EAAA,MAAA,CAAKU,MAAM,qBACTV,EAAA,OAAA,CAAMU,MAAM,OAAOI,UAAWG,YAC9BjB,EAAA,OAAA,CAAMU,MAAM,WAASQ,GAAAC,EAAAd,KAAKC,YAAQ,MAAAa,SAAA,OAAA,EAAAA,EAAEZ,qBAAiB,MAAAW,SAAA,OAAA,EAAAA,EAAEE,eAAgB,IAGzEpB,EAAA,MAAA,CAAKU,MAAM,qBACTV,EAAA,OAAA,CAAMU,MAAM,OAAOI,UAAWO,YAC9BrB,EAAA,OAAA,CAAMU,MAAM,SAASL,KAAKC,SAASgB,UAGrCtB,EAAA,OAAA,CAAMU,MAAM,sBAAsBI,UAAWS,0BAhCvB","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-card {\n  font-family: $primary-font;\n  width: 320px;\n  height: 320px;\n  display: flex;\n  padding: 25px;\n  flex-wrap: nowrap;\n  box-sizing: border-box;\n  flex-direction: column;\n  background-color: $verdocs-grey-4;\n  box-shadow: 2px 2px 5px rgba(51, 54, 75, 0.05);\n\n  .thumbnail {\n    width: 272px;\n    height: 158px;\n    object-fit: cover;\n    margin-bottom: 22px;\n    object-position: -20% 0;\n  }\n\n  .name {\n    font-size: 18px;\n    font-weight: 700;\n    margin-bottom: 7px;\n  }\n\n  .org-name {\n    font-size: 14px;\n    font-weight: 700;\n    margin-bottom: 6px;\n  }\n\n  hr {\n    width: 100%;\n    margin-bottom: 17px;\n    background-color: $icon-color;\n  }\n\n  .controls {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    text-align: center;\n    font-size: 16px;\n\n    .control {\n      flex: 1;\n      display: flex;\n      margin-right: 8px;\n      align-items: flex-start;\n      border-right: 1px solid $icon-color;\n\n      &.secondary {\n        justify-content: center;\n      }\n\n      svg {\n        fill: $icon-color;\n        height: 16px;\n        max-width: 16px;\n        margin: 0 8px -2px 0;\n      }\n    }\n  }\n\n  .additional-controls svg {\n    margin-right: 0;\n    fill: $verdocs-purple;\n  }\n}\n","import {Component, Prop, h, Host} from '@stencil/core';\nimport {ITemplate} from '@verdocs/js-sdk/Templates/Types';\nimport ActionsIcon from './actions.svg';\nimport EmailIcon from './email.svg';\nimport PagesIcon from './pages.svg';\nimport StarIcon from './star.svg';\n\n/**\n * Displays a summary of a template\n */\n@Component({\n  tag: 'verdocs-template-card',\n  styleUrl: 'verdocs-template-card.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateCard {\n  /**\n   * The template for which the card will be rendered.\n   */\n  @Prop() template: ITemplate;\n\n  render() {\n    return (\n      <Host>\n        <img src={this.template?.template_document?.thumbnail_url || ''} alt=\"Template Thumbnail\" class=\"thumbnail\" />\n\n        <span class=\"name\">{this.template.name}</span>\n        <span class=\"org-name\">{this.template.organization?.name || 'Public'}</span>\n\n        <hr />\n\n        <div class=\"controls\">\n          <div class=\"control\">\n            <span class=\"icon\" innerHTML={StarIcon} />\n            <span class=\"value\">{this.template.star_counter}</span>\n          </div>\n\n          <div class=\"control secondary\">\n            <span class=\"icon\" innerHTML={PagesIcon} />\n            <span class=\"value\">{this.template?.template_document?.page_numbers || 1}</span>\n          </div>\n\n          <div class=\"control secondary\">\n            <span class=\"icon\" innerHTML={EmailIcon} />\n            <span class=\"value\">{this.template.counter}</span>\n          </div>\n\n          <span class=\"additional-controls\" innerHTML={ActionsIcon} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}