@everymatrix/casino-tournaments-details 1.44.0 → 1.45.0
Sign up to get free protection for your applications and to get access to all the features.
- package/components/CasinoTournamentsDetails-2e7ZUY3d.js +676 -0
- package/components/CasinoTournamentsDetails-D1wF_uqm.cjs +1 -0
- package/es2015/casino-tournaments-details.cjs +1 -0
- package/es2015/casino-tournaments-details.js +16 -0
- package/package.json +15 -33
- package/.eslintrc +0 -84
- package/README.md +0 -30
- package/dist/casino-tournaments-details.js +0 -2
- package/dist/casino-tournaments-details.js.map +0 -1
- package/index.html +0 -37
- package/index.js +0 -1
- package/public/favicon.png +0 -0
- package/public/reset.css +0 -48
- package/rollup.config.js +0 -67
- package/src/CasinoTournamentsDetails.svelte +0 -129
- package/src/index.ts +0 -4
- package/stories/CasinoTournamentsDetails.stories.js +0 -13
- package/tsconfig.json +0 -6
@@ -1,129 +0,0 @@
|
|
1
|
-
<svelte:options tag={null} />
|
2
|
-
|
3
|
-
<script lang="ts">
|
4
|
-
|
5
|
-
export let title = '';
|
6
|
-
export let text = '';
|
7
|
-
|
8
|
-
export let clientstyling:string = '';
|
9
|
-
export let clientstylingurl:string = '';
|
10
|
-
|
11
|
-
let customStylingContainer: HTMLElement;
|
12
|
-
let displayNone:boolean = false;
|
13
|
-
|
14
|
-
let collapsed:Boolean = false;
|
15
|
-
|
16
|
-
const collapseText = () => {
|
17
|
-
collapsed = !collapsed;
|
18
|
-
}
|
19
|
-
|
20
|
-
const setClientStyling = ():void => {
|
21
|
-
let sheet = document.createElement('style');
|
22
|
-
sheet.innerHTML = clientstyling;
|
23
|
-
customStylingContainer.appendChild(sheet);
|
24
|
-
}
|
25
|
-
|
26
|
-
const setClientStylingURL = ():void => {
|
27
|
-
displayNone = true;
|
28
|
-
|
29
|
-
let url:URL = new URL(clientstylingurl);
|
30
|
-
let cssFile:HTMLElement = document.createElement('style');
|
31
|
-
|
32
|
-
fetch(url.href)
|
33
|
-
.then((res:any) => res.text())
|
34
|
-
.then((data:any) => {
|
35
|
-
cssFile.innerHTML = data
|
36
|
-
|
37
|
-
setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
|
38
|
-
setTimeout(() => { displayNone = false; }, 500);
|
39
|
-
});
|
40
|
-
}
|
41
|
-
|
42
|
-
const setContent = (element:HTMLElement, content:any) => {
|
43
|
-
let htmlContent = document.createElement("div");
|
44
|
-
htmlContent.innerHTML = content;
|
45
|
-
element.append(htmlContent);
|
46
|
-
}
|
47
|
-
|
48
|
-
$: customStylingContainer && clientstyling && setClientStyling();
|
49
|
-
$: customStylingContainer && clientstylingurl && setClientStylingURL();
|
50
|
-
</script>
|
51
|
-
|
52
|
-
<div bind:this={customStylingContainer} class="DetailsCard" part="DetailsCard">
|
53
|
-
{#if title}
|
54
|
-
<div class="DetailsTitle" part="DetailsTitle">
|
55
|
-
<p class="Title" part="Title">{title}</p>
|
56
|
-
<div class="CollapseButtonDetails" part="CollapseButtonDetails" on:click={() => collapseText()}>
|
57
|
-
{#if !collapsed}
|
58
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
59
|
-
<path d="M18 15l-6-6-6 6"/>
|
60
|
-
</svg>
|
61
|
-
{:else}
|
62
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
63
|
-
<path d="M6 9l6 6 6-6"/>
|
64
|
-
</svg>
|
65
|
-
{/if}
|
66
|
-
</div>
|
67
|
-
</div>
|
68
|
-
{/if}
|
69
|
-
|
70
|
-
{#if text && !collapsed}
|
71
|
-
<div class="DetailsContent sc" part="DetailsContent" use:setContent={text}>
|
72
|
-
</div>
|
73
|
-
{/if}
|
74
|
-
</div>
|
75
|
-
|
76
|
-
|
77
|
-
<style lang="scss">
|
78
|
-
$primary-background-color: var(--emfe-w-color-contrast, #07072A);
|
79
|
-
$primary-font-color: var(--emfe-w-color-white, #FFFFFF);
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
*,
|
84
|
-
*::before,
|
85
|
-
*::after {
|
86
|
-
box-sizing: border-box;
|
87
|
-
}
|
88
|
-
|
89
|
-
.Title {
|
90
|
-
text-transform: uppercase;
|
91
|
-
}
|
92
|
-
|
93
|
-
.DetailsCard {
|
94
|
-
border: 1px solid var(--emfe-w-color-contrast, #07072A);
|
95
|
-
color: $primary-font-color;
|
96
|
-
width: 100%;
|
97
|
-
margin: 25px 0 25px 0;
|
98
|
-
}
|
99
|
-
|
100
|
-
.DetailsTitle {
|
101
|
-
padding: 0 20px;
|
102
|
-
height: 60px;
|
103
|
-
display: flex;
|
104
|
-
align-items: center;
|
105
|
-
justify-content: space-between;
|
106
|
-
background: var(--emfe-w-color-contrast, #07072A);
|
107
|
-
}
|
108
|
-
|
109
|
-
.DetailsContent {
|
110
|
-
overflow: auto;
|
111
|
-
height: 150px;
|
112
|
-
font-size: 14px;
|
113
|
-
padding: 10px 10px 10px 20px;
|
114
|
-
margin: 10px 20px 10px 0;
|
115
|
-
}
|
116
|
-
|
117
|
-
.sc::-webkit-scrollbar {
|
118
|
-
width: 5px;
|
119
|
-
height: 5px;
|
120
|
-
}
|
121
|
-
.sc::-webkit-scrollbar-track {
|
122
|
-
background-color: rgba(255, 255, 255, 0.1);
|
123
|
-
border-radius: 10px;
|
124
|
-
}
|
125
|
-
.sc::-webkit-scrollbar-thumb {
|
126
|
-
background-color: var(--emfe-w-color-white, #FFFFFF);
|
127
|
-
border-radius: 10px;
|
128
|
-
}
|
129
|
-
</style>
|
package/src/index.ts
DELETED
@@ -1,13 +0,0 @@
|
|
1
|
-
import { html } from 'lit-element';
|
2
|
-
|
3
|
-
import CasinoTournamentsDetails from '../src/CasinoTournamentsDetails';
|
4
|
-
|
5
|
-
// This default export determines where your story goes in the story list
|
6
|
-
export default {
|
7
|
-
title: 'CasinoTournamentsDetails',
|
8
|
-
};
|
9
|
-
|
10
|
-
// 👇 We create a “template” of how args map to rendering
|
11
|
-
const CasinoTournamentsDetails = ({ aProperty }) => html`<casino-tournaments-details></casino-tournaments-details>`;
|
12
|
-
|
13
|
-
export const FirstStory = CasinoTournamentsDetails.bind({});
|