@livelike/custom-widgets 1.0.0

package/README.md

@@ -0,0 +1,50 @@
+# Custom Widgets
+
+## Install
+
+```bash
+npm install @livelike/custom-widgets
+```
+
+## Usage
+
+### Import LiveLike's custom widget package
+
+```js
+import * as LiveLike from '@livelike/custom-widgets';
+```
+
+### Import LiveLike custom styling
+```js
+import '@livelike/custom-widgets/dist/livelike.css';
+```
+
+### Initialize LiveLike SDK
+```js
+LiveLike.LiveLikeInit({ clientId: '**************' });
+```
+
+### Use custom widgets
+
+#### 1. Image Poll
+```js
+    <image-poll
+        widgetid="***************"
+        kind="image-poll"
+    ></image-poll>
+```
+
+#### 2. Cheer Meter
+```js
+    <cheer-meter
+        widgetid="***************"
+        kind="cheer-meter"
+    ></cheer-meter>
+```
+
+#### 3. Circular Text Predictor
+```js    
+    <circular-predictor
+        widgetid="***************"
+    ></circular-predictor>
+```

package/dist/livelike.css

@@ -0,0 +1 @@
+circular-predictor{background:#fff;border-radius:16px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:16px}.title-container{color:#02235c;font-family:Bai Jamjuree;font-size:20px;font-style:normal;font-weight:700;line-height:110%;text-transform:uppercase}.widget-footer{width:100%;color:#02235c;font-family:Bai Jamjuree;font-size:20px;font-style:normal;font-weight:700;line-height:110%;text-transform:uppercase;text-align:center}.predictor-footer-buton{display:flex;height:45px;padding:12px 24px;justify-content:center;font-family:Bai Jamjuree;align-items:center;gap:8px;align-self:stretch;border-radius:30px;width:100%;border:none;font-size:16px;font-weight:600;line-height:20px;text-transform:capitalize;text-align:center;background:linear-gradient(92deg,#225696 1.91%,#0d8efe 98.01%)}.predictor-footer-buton.disabled{opacity:.5;cursor:not-allowed}:host{display:inline-block}svg{overflow:visible}tgl-ps-circular-slider{width:100%;margin:50px 0;display:flex;align-items:center;justify-content:center}.slider-background{fill:none}.slider-progress{fill:none;transition:stroke-dasharray .3s ease}.slider-handle{cursor:pointer}.slider-value{color:#02235c;text-align:center;font-family:Bai Jamjuree;font-size:40px;font-style:normal;font-weight:700;line-height:normal;letter-spacing:.4px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-webkit-tap-highlight-color:transparent}image-poll-option[selected]{border:2px solid #225696}image-poll-option[selected] livelike-description[selected]{opacity:1}image-poll-option{background:#f8f4f1;box-shadow:0 0 0 1px transparent inset;overflow:hidden;display:flex;column-gap:10px;cursor:pointer;border-radius:8px;height:50px;border:2px solid #f8f4f1;transition:border ease .3s}image-poll-option:hover:not([disabled]){border:2px solid #225696}image-poll-option livelike-image img{height:48px;width:48px}image-poll-option .livelike-voting-image-container{width:100%;display:flex;justify-content:space-between;align-items:center;column-gap:8px}image-poll-option .livelike-voting-image-container livelike-description{color:#02235c;font-style:normal;font-weight:600;font-family:Bai Jamjuree;padding:0;font-size:14px;line-height:22px}image-poll-option livelike-percentage{display:none}image-poll-option[disabled]{cursor:not-allowed}image-poll{background:#fff;border-radius:16px}image-poll livelike-widget-root{margin-bottom:0}image-poll livelike-widget-root livelike-widget-header{margin-top:-8px;display:flex}image-poll livelike-widget-root livelike-widget-header livelike-title{padding:16px;margin-top:-8px;width:93%;border-radius:16px 16px 0 0}image-poll livelike-widget-body{background:var(--brand-primary-background);display:flex;flex-direction:column;border:.5px solid var(--brand-widget-border);border-top:0}image-poll livelike-widget-body[disabled]{border-radius:0 0 8px 8px;border:.5px solid var(--brand-widget-border);border-top:none}image-poll livelike-select{padding:0 16px;display:flex;flex-direction:column;row-gap:10px;border:0;color:#000}image-poll livelike-select[disabled]{border:none}image-poll livelike-image img{height:50px;width:50px}image-poll livelike-option{box-shadow:0 0 0 1px transparent inset;border:2px solid transparent;border-radius:8px;padding:0 10px 0 0;background:#f8f4f1;overflow:hidden;height:50px;align-items:center;gap:10px;flex-direction:row}image-poll livelike-option[selected]{border-radius:8px;border:2px solid #225696;opacity:1}image-poll livelike-option .livelike-voting-image-container{flex-grow:1;height:100%;display:flex;justify-content:space-between;align-items:center;row-gap:2px;flex-direction:row}image-poll livelike-option .livelike-voting-image-container livelike-description{font-size:14px;color:#02235c;font-style:normal;font-weight:600;line-height:normal;padding:0}image-poll livelike-option .livelike-voting-image-container livelike-description[selected],image-poll livelike-option .livelike-voting-image-container livelike-percentage[selected]{opacity:1}image-poll livelike-option .livelike-voting-image-container livelike-percentage{font-style:normal;color:#000;font-size:16px;font-weight:400;line-height:normal;padding:0}image-poll livelike-option livelike-image img{height:50px;width:50px}image-poll livelike-option[disabled] .livelike-voting-image-container{align-items:center;margin-bottom:0}image-poll livelike-option .livelike-voting-image-container{color:#1a2235;font-size:14px;font-style:normal;font-weight:8;line-height:normal}image-poll livelike-option livelike-progress{border-radius:0;background:#00e8da;height:4px;bottom:0}image-poll livelike-footer{overflow:hidden;background:transparent;padding:24px 16px}image-poll livelike-footer{border-radius:0;display:flex;align-items:center;gap:16px;color:#ffffffb3;font-size:14px;font-weight:600}image-poll livelike-footer .widget-button{width:100%;border:0;border-radius:30px;display:flex;padding:12px 16px;justify-content:center;align-items:center;gap:10px;align-self:stretch;color:var(--white);text-align:center;font-size:16px;font-weight:600;line-height:20px;text-transform:capitalize;background:linear-gradient(92deg,#225696 1.91%,#0d8efe 98.01%);opacity:.5;cursor:not-allowed}image-poll livelike-footer .widget-button:disabled{background:linear-gradient(92deg,#225696 1.91%,#0d8efe 98.01%);color:#fff;opacity:.5;cursor:not-allowed}image-poll livelike-footer .widget-button.widget-expired{background:var(--brand-disabled);color:var(--brand-tabs-border-bottom-color)}image-poll livelike-footer .widget-button.option-selected:not(:disabled){opacity:1;cursor:pointer}image-poll livelike-image{z-index:1}image-poll livelike-footer .widget-button[interactedExpire]{background:linear-gradient(92deg,#225696 1.91%,#0d8efe 98.01%);color:var(--white)}image-poll livelike-footer .widget-button[notInteractedExpire]{background:transparent;color:#02235c;font-family:Bai Jamjuree;font-size:20px;font-style:normal;font-weight:700;line-height:110%;text-transform:uppercase;opacity:1}image-poll livelike-title{color:#02235c;font-family:Bai Jamjuree;font-size:20px;font-style:normal;font-weight:700;line-height:110%;text-transform:uppercase;padding:0 16px 16px 0;width:93%;background:#fff}cheer-meter{display:flex;flex-direction:column;padding:0 16px 16px;justify-content:center;align-items:center;gap:15px;border-radius:16px;background:var(--white)}cheer-meter livelike-option{width:47%;justify-content:center;border-radius:8px;display:flex;flex-direction:column;gap:10px}cheer-meter livelike-select.image-grid{display:flex;width:100%;flex-wrap:wrap;justify-content:space-between;row-gap:14px;flex-direction:row}cheer-meter livelike-option[selected],cheer-meter livelike-option{padding:unset;background:transparent}cheer-meter livelike-option .cheer-image-container{height:96px}cheer-meter livelike-option[selected]{border:2px solid var(--white)}.cheer-image-container{width:100%;height:85px;display:flex;align-items:center;justify-content:center;border-radius:8px}cheer-option{width:100%;-webkit-user-select:none;user-select:none}.image-grid livelike-option:nth-child(2){margin-left:0}cheer-meter livelike-description{color:#02235c;font-size:14px;font-style:normal;font-weight:600;line-height:21.47px;text-align:center}vote-count{font-size:17px;text-align:center;font-style:normal;font-weight:700;line-height:normal;border:1px solid #fff;color:#fff;display:flex;justify-content:center;border-radius:8px;padding:10px 9px;top:38%;position:absolute;left:50%;transform:translate(-50%,-50%);z-index:100;min-width:42px;background:#005bff}cheer-meter livelike-widget-body{background:none}cheer-meter livelike-select{padding:0}cheer-meter livelike-image img{width:72px;height:72px}cheer-meter livelike-widget-root{width:100%}cheer-meter .expire-text{margin-top:16px;color:#02235c;font-family:Bai Jamjuree;font-size:20px;font-style:normal;font-weight:700;line-height:110%;text-transform:uppercase;text-align:center}cheer-meter livelike-title{color:#02235c;font-family:Bai Jamjuree;font-size:20px;font-style:normal;font-weight:700;line-height:110%;text-transform:uppercase;padding:0 16px 16px 0;width:93%;background:#fff}:host{max-width:600px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.lit:hover{filter:drop-shadow(0 0 2em #325cffaa)}.card{padding:2em}.read-the-docs{color:#888}::slotted(h1){font-size:3.2em;line-height:1.1}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}lg-game-center .game-center lg-match button,lg-timeline button,lg-leaderboard button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:Bai Jamjuree;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}lg-match button:hover,lg-timeline button:hover,lg-leaderboard button:hover{border-color:var(--brand-primary)}lg-match button[disabled]:hover,lg-timeline button[disabled]:hover,lg-leaderboard button[disabled]:hover{border-color:var(--brand-disabled)}lg-match button:focus,lg-timeline button:focus,lg-leaderboard button:focus,lg-match button:focus-visible,lg-timeline button:focus-visible,lg-leaderboard button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){a:hover{color:#747bff}lg-match button,lg-timeline button,lg-leaderboard button{background-color:#f9f9f9}}.tabs-header{display:none;justify-content:space-evenly;border-radius:6px;background:#fff;padding:6px;margin:0 8px 12px}.tabs-header .tab-selected{background:var(--brand-primary);color:#fff;padding:10px;font-weight:900}.tabs-header button{color:var(--brand-primary);border:none;background:inherit;font-style:normal;font-weight:500;width:100%;border-radius:6px;font-family:Bai Jamjuree;white-space:nowrap}.coming-soon{border:1px solid black;padding:10px;margin:10px;display:flex;justify-content:center;background:#fff;color:#000;border-radius:8px}.logout-modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:2000;animation:fadeIn .3s ease}.logout-modal{display:inline-flex;flex-direction:column;align-items:center;gap:24px;border-radius:4px;background:var(--brand-chat-delete-modal-background);box-shadow:0 4px 4px #0000000d;padding:16px;animation:scaleIn .3s cubic-bezier(.175,.885,.32,1.275)}.logout-modal-header{display:flex;flex-direction:column;padding:0 10px;justify-content:center;align-items:center;gap:10px}.logout-modal-title{color:var(--white);text-align:center;font-family:Bai Jamjuree;font-size:16px;font-style:italic;font-weight:700;line-height:normal;text-transform:uppercase;margin:0}.logout-modal-content{width:100%}.logout-modal-message{margin:0;color:var(--white);text-align:center;font-family:Bai Jamjuree;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.logout-modal-actions{display:flex;gap:12px;flex-direction:column;color:var(--white);text-align:center;font-family:Bai Jamjuree;font-size:16px;font-style:normal;font-weight:600;line-height:20px}.logout-modal-button{color:#fff;text-align:center;font-family:Bai Jamjuree;font-size:16px;font-style:normal;font-weight:600;line-height:20px;border:none;transition:all .2s ease;border-radius:4px;padding:10px 16px}.logout-modal-button.cancel-button{background:var(--brand-tabs-border-bottom-color);color:#fff}.logout-modal-button.cancel-button:hover{background:#2e2e2e;transform:translateY(-2px)}.logout-modal-button.confirm-button{background:var(--brand-widget-button);color:#fff}.logout-modal-button.confirm-button:hover{background:#b52840;transform:translateY(-2px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}:root{--white: #fff;--black: #000;--alt-bg-color: #6423E1;--brand-primary: #000D4C;--brand-primary-dark: #000938 ;--brand-secondary: #FFE100;--brand-tertiary: #cf2e25;--brand-earn: #0a8446;--brand-text: var(--white);--brand-primary-background: var(--white);--brand-color-tabs: #333;--brand-tabs-color-selected: #00438c;--brand-game-center-text: #1a2235;--brand-widgets-background: #fdf6ff;--brand-selected: #013b73;--brand-footer-background: #cadfff;--brand-progress-color: #4f4f4f;--brand-submit-color: #777;--brand-disabled: #d4d4d4;--brand-widget-border: rgba(161, 161, 161, .4);--brand-correct: #3dcf25;--brand-wrong: #971518;--brand-predictor-blue: #012378;--dropdown-background: #101010;--brand-grey: #808080;--brand-border: #e4e4e4;--brand-purple: var(--alt-bg-color);--brand-thumb: #1a2235;--brand-header-background: #0E0E0E;--brand-welcome-page-button-color: #DC314E;--highlight-color: #ff6600;--highlight-gradient: linear-gradient(180deg, #ff7c43 -2.31%, #ff4200 85.92%);--quest-text-color: #10213d;--reward-text-color: #142542;--primary-color: #002d72;--border-color: #ffffff2e;--modal-bg-color: rgba(0, 0, 0, .4);--gray-bg-color: #efefef;--primary-background-timeline: rgba(30, 30, 30, .6);--secondary-background-timeline: #4f4f4f;--ternary-background-timeline: #971518;--quaternary-background-timeline: #3dcf25;--quinary-background-timeline: #505760;--senary-background-timeline: rgba(79, 79, 79, .5);--disabled-background-timeline: #d4d4d4;--primary-text-timeline: #fff;--disabled-text-timeline: #777777;--brand-widget-button: #DC314E;--brand-chat-delete-modal-background: #181818;--brand-tabs-border-bottom-color: #242424;--navy-team-bg: #00528f;--red-team-bg: #e53238;--tan-team-bg: #bc9e53;--brand-secondary-background: #ededef;font-family:Bai Jamjuree;line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--brand-text);background:var(--black);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;justify-content:center;align-items:center;height:100dvh;overflow:hidden}mets-game-center-app,mets-connect,lit-router,mets-wallet{height:100%;overflow-y:auto;width:100%;max-width:500px;background:var(--brand-primary-background)}mets-quests-and-rewards-app{overflow-y:auto}.ny-mets-app{padding:0 15px;display:flex;height:100%;overflow:hidden;flex-direction:column}#outlet{display:flex;flex:1;height:100%}mets-guess-the-word-app{width:100%;background:var(--brand-primary-background)}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}ll-header,lg-leaderboard,ll-faq{opacity:0;animation:fadeInAnimation 2s ease-in-out forwards}pl-play-predictor{height:100%;overflow:hidden;overflow-y:auto;width:100%;max-width:500px;background:var(--brand-primary);color:var(--brand-primary);scrollbar-width:none}pl-play-predictor::-webkit-scrollbar{display:none}