@fluid-topics/ft-top-bar 0.1.6 → 0.1.9
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/build/ft-top-bar.light.js +62 -0
- package/build/ft-top-bar.min.js +76 -1
- package/package.json +3 -3
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
!function(t,e,i,s){var l=function(t,e,i,s){for(var l,n=arguments.length,o=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,a=t.length-1;a>=0;a--)(l=t[a])&&(o=(n<3?l(o):n>3?l(e,i,o):l(e,i))||o);return n>3&&o&&Object.defineProperty(e,i,o),o};const n={colorSurface:s.FtCssVariable.external(s.designSystemVariables.colorSurface,"Design system"),elevation02:s.FtCssVariable.external(s.designSystemVariables.elevation02,"Design system"),titleFont:s.FtCssVariable.external(s.designSystemVariables.titleFont,"Design system"),colorOnSurfaceHigh:s.FtCssVariable.external(s.designSystemVariables.colorOnSurfaceHigh,"Design system")};t.FtTopBar=class extends s.FtLitElement{constructor(){super(...arguments),this.title=""}getStyles(){return e.css`
|
|
2
|
+
:host {
|
|
3
|
+
display: block;
|
|
4
|
+
position: absolute;
|
|
5
|
+
top: 0;
|
|
6
|
+
left: 0;
|
|
7
|
+
right: 0;
|
|
8
|
+
height: 48px;
|
|
9
|
+
z-index: 1;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
#container {
|
|
13
|
+
background: ${n.colorSurface};
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
box-shadow: ${n.elevation02};
|
|
17
|
+
padding: 0 16px;
|
|
18
|
+
height: 100%;
|
|
19
|
+
font-family: ${n.titleFont}, system-ui, sans-serif;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
#left {
|
|
23
|
+
flex-grow: 1;
|
|
24
|
+
height: 100%;
|
|
25
|
+
display: flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
min-width: 0;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
#right {
|
|
31
|
+
height: 100%;
|
|
32
|
+
display: flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.title {
|
|
37
|
+
color: ${n.colorOnSurfaceHigh};
|
|
38
|
+
-webkit-font-smoothing: antialiased;
|
|
39
|
+
font-size: 0.875rem;
|
|
40
|
+
line-height: 2.25rem;
|
|
41
|
+
font-weight: 500;
|
|
42
|
+
letter-spacing: 0.0892857em;
|
|
43
|
+
text-transform: uppercase;
|
|
44
|
+
margin-right: 16px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
slot {
|
|
48
|
+
display: flex;
|
|
49
|
+
align-items: center;
|
|
50
|
+
min-width: 0;
|
|
51
|
+
}
|
|
52
|
+
`}getTemplate(){return e.html`
|
|
53
|
+
<div id="container">
|
|
54
|
+
<div id="left">
|
|
55
|
+
<span class="title" ?hidden=${!this.title}>${this.title}</span>
|
|
56
|
+
<slot name="leftSlot"></slot>
|
|
57
|
+
</div>
|
|
58
|
+
<div id="right">
|
|
59
|
+
<slot name="rightSlot"></slot>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
`}},t.FtTopBar.elementDefinitions={},l([i.property({type:String})],t.FtTopBar.prototype,"title",void 0),t.FtTopBar=l([s.customElement("ft-top-bar")],t.FtTopBar),t.FtTopBarCssVariables=n,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.wcUtils);
|
package/build/ft-top-bar.min.js
CHANGED
|
@@ -38,4 +38,79 @@ var et;null===(et=window.HTMLSlotElement)||void 0===et||et.prototype.assignedEle
|
|
|
38
38
|
* @license
|
|
39
39
|
* Copyright 2021 Google LLC
|
|
40
40
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
41
|
-
*/class rt extends(function(t){return class extends t{createRenderRoot(){const t=this.constructor,{registry:i,elementDefinitions:e,shadowRootOptions:n}=t;e&&!i&&(t.registry=new CustomElementRegistry,Object.entries(e).forEach((([i,e])=>t.registry.define(i,e))));const o=this.renderOptions.creationScope=this.attachShadow({...n,customElements:t.registry});return a(o,this.constructor.elementStyles),o}}}(Y)){constructor(){super(),this.constructorName=this.constructor.name,this.proto=this.constructor.prototype}getStyles(){return[]}getTemplate(){return null}render(){let t=this.getStyles();return Array.isArray(t)||(t=[t]),L
|
|
41
|
+
*/class rt extends(function(t){return class extends t{createRenderRoot(){const t=this.constructor,{registry:i,elementDefinitions:e,shadowRootOptions:n}=t;e&&!i&&(t.registry=new CustomElementRegistry,Object.entries(e).forEach((([i,e])=>t.registry.define(i,e))));const o=this.renderOptions.creationScope=this.attachShadow({...n,customElements:t.registry});return a(o,this.constructor.elementStyles),o}}}(Y)){constructor(){super(),this.constructorName=this.constructor.name,this.proto=this.constructor.prototype}getStyles(){return[]}getTemplate(){return null}render(){let t=this.getStyles();return Array.isArray(t)||(t=[t]),L`
|
|
42
|
+
${t.map((t=>L`
|
|
43
|
+
<style>${t}</style>
|
|
44
|
+
`))}
|
|
45
|
+
${this.getTemplate()}
|
|
46
|
+
`}adoptedCallback(){Object.getPrototypeOf(this)!==this.constructorName&&Object.setPrototypeOf(this,this.proto)}updated(t){super.updated(t),setTimeout((()=>this.contentAvailableCallback(t)),0)}contentAvailableCallback(t){}}var st,at;s`
|
|
47
|
+
.ft-no-text-select {
|
|
48
|
+
-webkit-touch-callout: none;
|
|
49
|
+
-webkit-user-select: none;
|
|
50
|
+
-khtml-user-select: none;
|
|
51
|
+
-moz-user-select: none;
|
|
52
|
+
-ms-user-select: none;
|
|
53
|
+
user-select: none;
|
|
54
|
+
}
|
|
55
|
+
`,navigator.vendor&&navigator.vendor.match(/apple/i)||(null===(at=null===(st=window.safari)||void 0===st?void 0:st.pushNotification)||void 0===at||at.toString());var lt=function(t,i,e,n){for(var o,r=arguments.length,s=r<3?i:null===n?n=Object.getOwnPropertyDescriptor(i,e):n,a=t.length-1;a>=0;a--)(o=t[a])&&(s=(r<3?o(s):r>3?o(i,e,s):o(i,e))||s);return r>3&&s&&Object.defineProperty(i,e,s),s};const ct={colorSurface:nt.external(ot.colorSurface,"Design system"),elevation02:nt.external(ot.elevation02,"Design system"),titleFont:nt.external(ot.titleFont,"Design system"),colorOnSurfaceHigh:nt.external(ot.colorOnSurfaceHigh,"Design system")};var ht;t.FtTopBar=class extends rt{constructor(){super(...arguments),this.title=""}getStyles(){return s`
|
|
56
|
+
:host {
|
|
57
|
+
display: block;
|
|
58
|
+
position: absolute;
|
|
59
|
+
top: 0;
|
|
60
|
+
left: 0;
|
|
61
|
+
right: 0;
|
|
62
|
+
height: 48px;
|
|
63
|
+
z-index: 1;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
#container {
|
|
67
|
+
background: ${ct.colorSurface};
|
|
68
|
+
display: flex;
|
|
69
|
+
align-items: center;
|
|
70
|
+
box-shadow: ${ct.elevation02};
|
|
71
|
+
padding: 0 16px;
|
|
72
|
+
height: 100%;
|
|
73
|
+
font-family: ${ct.titleFont}, system-ui, sans-serif;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
#left {
|
|
77
|
+
flex-grow: 1;
|
|
78
|
+
height: 100%;
|
|
79
|
+
display: flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
min-width: 0;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
#right {
|
|
85
|
+
height: 100%;
|
|
86
|
+
display: flex;
|
|
87
|
+
align-items: center;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.title {
|
|
91
|
+
color: ${ct.colorOnSurfaceHigh};
|
|
92
|
+
-webkit-font-smoothing: antialiased;
|
|
93
|
+
font-size: 0.875rem;
|
|
94
|
+
line-height: 2.25rem;
|
|
95
|
+
font-weight: 500;
|
|
96
|
+
letter-spacing: 0.0892857em;
|
|
97
|
+
text-transform: uppercase;
|
|
98
|
+
margin-right: 16px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
slot {
|
|
102
|
+
display: flex;
|
|
103
|
+
align-items: center;
|
|
104
|
+
min-width: 0;
|
|
105
|
+
}
|
|
106
|
+
`}getTemplate(){return L`
|
|
107
|
+
<div id="container">
|
|
108
|
+
<div id="left">
|
|
109
|
+
<span class="title" ?hidden=${!this.title}>${this.title}</span>
|
|
110
|
+
<slot name="leftSlot"></slot>
|
|
111
|
+
</div>
|
|
112
|
+
<div id="right">
|
|
113
|
+
<slot name="rightSlot"></slot>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
`}},t.FtTopBar.elementDefinitions={},lt([function(t){return(i,e)=>void 0!==e?((t,i,e)=>{i.constructor.createProperty(e,t)})(t,i,e):it(t,i)}({type:String})],t.FtTopBar.prototype,"title",void 0),t.FtTopBar=lt([(ht="ft-top-bar",t=>{window.customElements.get(ht)||window.customElements.define(ht,t)})],t.FtTopBar),t.FtTopBarCssVariables=ct,Object.defineProperty(t,"t",{value:!0})}({});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-top-bar",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.9",
|
|
4
4
|
"description": "A top bar for FT admin screens",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluid-topics/ft-wc-utils": "^0.1.
|
|
22
|
+
"@fluid-topics/ft-wc-utils": "^0.1.9",
|
|
23
23
|
"lit": "^2.0.2"
|
|
24
24
|
},
|
|
25
|
-
"gitHead": "
|
|
25
|
+
"gitHead": "9f649211936b1529bf691190603f2f721d2a72bd"
|
|
26
26
|
}
|