@fluid-topics/ft-reader-metadata 1.1.52 → 1.1.54
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.
|
@@ -39,7 +39,9 @@ class FtReaderMetadata extends FtReaderComponent {
|
|
|
39
39
|
${this.useForSwitchingToRelatives && this.metadata && this.metadata.values.length > 0 && this.relatives.length > 0
|
|
40
40
|
? this.renderSwitchToRelatives()
|
|
41
41
|
: html `
|
|
42
|
-
<ft-chip part="chip"
|
|
42
|
+
<ft-chip part="chip"
|
|
43
|
+
exportpartsPrefix="chip"
|
|
44
|
+
?multiLine=${this.multiLine}>
|
|
43
45
|
${this.renderContent()}
|
|
44
46
|
</ft-chip>
|
|
45
47
|
`}
|
|
@@ -66,6 +68,7 @@ class FtReaderMetadata extends FtReaderComponent {
|
|
|
66
68
|
<div part="floating-menu-container" class="ft-reader-metadata--container">
|
|
67
69
|
<ft-floating-menu part="floating-menu" text="Toggle collapsible" trailingIcon>
|
|
68
70
|
<ft-chip part="chip"
|
|
71
|
+
exportpartsPrefix="chip"
|
|
69
72
|
?multiLine=${this.multiLine}
|
|
70
73
|
trailingIcon icon="thin_arrow"
|
|
71
74
|
slot="toggle"
|
|
@@ -817,7 +817,7 @@ const V=Symbol.for(""),X=t=>{if(t?.r===V)return t?._$litStatic$},q=t=>({_$litSta
|
|
|
817
817
|
width: ${at.smallIconOnlyWidth};
|
|
818
818
|
padding: unset;
|
|
819
819
|
}
|
|
820
|
-
`,o.noTextSelect];var hi=function(t,o,e,i){for(var r,n=arguments.length,a=n<3?o:null===i?i=Object.getOwnPropertyDescriptor(o,e):i,l=t.length-1;l>=0;l--)(r=t[l])&&(a=(n<3?r(a):n>3?r(o,e,a):r(o,e))||a);return n>3&&a&&Object.defineProperty(o,e,a),a};class ui extends si{constructor(){super(...arguments),this.primary=!1,this.secondary=!1,this.tertiary=!1,this.neutral=!1,this.small=!1}get buttonClasses(){return{"ft-button":!0,"ft-button--primary":this.primary,"ft-button--secondary":this.secondary,"ft-button--tertiary":this.tertiary||!this.primary&&!this.secondary&&!this.neutral,"ft-button--neutral":this.neutral,"ft-button--large":!this.small,"ft-button--small":this.small,"ft-button--icon-only":!this.hasTextContent(),"ft-button--trailing-icon":this.trailingIcon,"ft-button--loading":this.trailingIcon,"ft-no-text-select":!0,"ft-button--no-icon":!this.icon}}get typographyVariant(){return this.small?tt.caption1medium:tt.body2medium}}ui.styles=[o.safariEllipsisFix,di],hi([i.property({type:Boolean})],ui.prototype,"primary",void 0),hi([i.property({type:Boolean})],ui.prototype,"secondary",void 0),hi([i.property({type:Boolean})],ui.prototype,"tertiary",void 0),hi([i.property({type:Boolean})],ui.prototype,"neutral",void 0),hi([i.property({type:Boolean})],ui.prototype,"small",void 0),o.customElement("ft-button")(fi),o.customElement("ftds-button")(ui);const gi=o.FtCssVariableFactory.extend("--ft-chip-color","",o.designSystemVariables.colorOnSurface),yi={backgroundColor:o.FtCssVariableFactory.extend("--ft-chip-background-color","",o.designSystemVariables.colorSurface),color:gi,fontSize:o.FtCssVariableFactory.extend("--ft-chip-font-size","",Bt.fontSize),iconSize:o.FtCssVariableFactory.create("--ft-chip-icon-size","","SIZE","18px"),rippleColor:o.FtCssVariableFactory.extend("--ft-chip-ripple-color","",gi),horizontalPadding:o.FtCssVariableFactory.create("--ft-chip-horizontal-padding","","SIZE","6px"),verticalPadding:o.FtCssVariableFactory.create("--ft-chip-vertical-padding","","SIZE","6px"),colorOutline:o.FtCssVariableFactory.external(o.designSystemVariables.colorOutline,"Design system"),opacityDisabled:o.FtCssVariableFactory.external(o.designSystemVariables.colorOpacityDisabled,"Design system")},bi=o.FtCssVariableFactory.extend("--ft-chip-highlighted-color","",o.FtCssVariableFactory.extend("--ft-chip-color","",o.designSystemVariables.colorOnPrimary)),mi={backgroundColor:o.FtCssVariableFactory.extend("--ft-chip-highlighted-background-color","",o.FtCssVariableFactory.extend("--ft-chip-background-color","",o.designSystemVariables.colorPrimary)),color:bi,rippleColor:o.FtCssVariableFactory.extend("--ft-chip-highlighted-ripple-color","",bi)},xi=o.FtCssVariableFactory.create("--ft-chip-dense-horizontal-padding","","SIZE","4px"),vi=o.FtCssVariableFactory.create("--ft-chip-dense-vertical-padding","","SIZE","4px"),Oi=[o.noTextSelect,e.css`
|
|
820
|
+
`,o.noTextSelect];var hi=function(t,o,e,i){for(var r,n=arguments.length,a=n<3?o:null===i?i=Object.getOwnPropertyDescriptor(o,e):i,l=t.length-1;l>=0;l--)(r=t[l])&&(a=(n<3?r(a):n>3?r(o,e,a):r(o,e))||a);return n>3&&a&&Object.defineProperty(o,e,a),a};class ui extends si{constructor(){super(...arguments),this.primary=!1,this.secondary=!1,this.tertiary=!1,this.neutral=!1,this.small=!1}get buttonClasses(){return{"ft-button":!0,"ft-button--primary":this.primary,"ft-button--secondary":this.secondary,"ft-button--tertiary":this.tertiary||!this.primary&&!this.secondary&&!this.neutral,"ft-button--neutral":this.neutral,"ft-button--large":!this.small,"ft-button--small":this.small,"ft-button--icon-only":!this.hasTextContent(),"ft-button--trailing-icon":this.trailingIcon,"ft-button--loading":this.trailingIcon,"ft-no-text-select":!0,"ft-button--no-icon":!this.icon}}get typographyVariant(){return this.small?tt.caption1medium:tt.body2medium}}ui.styles=[o.safariEllipsisFix,di],hi([i.property({type:Boolean})],ui.prototype,"primary",void 0),hi([i.property({type:Boolean})],ui.prototype,"secondary",void 0),hi([i.property({type:Boolean})],ui.prototype,"tertiary",void 0),hi([i.property({type:Boolean})],ui.prototype,"neutral",void 0),hi([i.property({type:Boolean})],ui.prototype,"small",void 0),o.customElement("ft-button")(fi),o.customElement("ftds-button")(ui);const gi=o.FtCssVariableFactory.extend("--ft-chip-color","",o.designSystemVariables.colorOnSurface),yi={backgroundColor:o.FtCssVariableFactory.extend("--ft-chip-background-color","",o.designSystemVariables.colorSurface),color:gi,fontSize:o.FtCssVariableFactory.extend("--ft-chip-font-size","",Bt.fontSize),iconSize:o.FtCssVariableFactory.create("--ft-chip-icon-size","","SIZE","18px"),borderRadius:o.FtCssVariableFactory.create("--ft-chip-border-radius","","SIZE",""),rippleColor:o.FtCssVariableFactory.extend("--ft-chip-ripple-color","",gi),horizontalPadding:o.FtCssVariableFactory.create("--ft-chip-horizontal-padding","","SIZE","6px"),verticalPadding:o.FtCssVariableFactory.create("--ft-chip-vertical-padding","","SIZE","6px"),colorOutline:o.FtCssVariableFactory.external(o.designSystemVariables.colorOutline,"Design system"),opacityDisabled:o.FtCssVariableFactory.external(o.designSystemVariables.colorOpacityDisabled,"Design system")},bi=o.FtCssVariableFactory.extend("--ft-chip-highlighted-color","",o.FtCssVariableFactory.extend("--ft-chip-color","",o.designSystemVariables.colorOnPrimary)),mi={backgroundColor:o.FtCssVariableFactory.extend("--ft-chip-highlighted-background-color","",o.FtCssVariableFactory.extend("--ft-chip-background-color","",o.designSystemVariables.colorPrimary)),color:bi,rippleColor:o.FtCssVariableFactory.extend("--ft-chip-highlighted-ripple-color","",bi)},xi=o.FtCssVariableFactory.create("--ft-chip-dense-horizontal-padding","","SIZE","4px"),vi=o.FtCssVariableFactory.create("--ft-chip-dense-vertical-padding","","SIZE","4px"),Oi=[o.noTextSelect,e.css`
|
|
821
821
|
:host {
|
|
822
822
|
display: inline-block;
|
|
823
823
|
max-width: 100%;
|
|
@@ -844,7 +844,7 @@ const V=Symbol.for(""),X=t=>{if(t?.r===V)return t?._$litStatic$},q=t=>({_$litSta
|
|
|
844
844
|
border: 1px solid ${yi.colorOutline};
|
|
845
845
|
color: ${yi.color};
|
|
846
846
|
${o.setVariable(Le.color,yi.rippleColor)};
|
|
847
|
-
border-radius: calc(var(--ft-chip-internal-content-height) / 2 + var(--ft-chip-internal-vertical-padding));
|
|
847
|
+
border-radius: var(${e.unsafeCSS(yi.borderRadius.name)}, calc(var(--ft-chip-internal-content-height) / 2 + var(--ft-chip-internal-vertical-padding)));
|
|
848
848
|
padding: calc(var(--ft-chip-internal-vertical-padding) - 1px) calc(var(--ft-chip-internal-horizontal-padding) - 1px);
|
|
849
849
|
background-color: ${yi.backgroundColor};
|
|
850
850
|
line-height: var(--ft-chip-internal-content-height);
|
|
@@ -958,9 +958,10 @@ const V=Symbol.for(""),X=t=>{if(t?.r===V)return t?._$litStatic$},q=t=>({_$litSta
|
|
|
958
958
|
<div class="${r.classMap(t)}"
|
|
959
959
|
aria-label="${this.getLabel()}"
|
|
960
960
|
tabindex="${this.interactionsOnChip?0:-1}"
|
|
961
|
-
@keyup=${this.onKeyUp}
|
|
961
|
+
@keyup=${this.onKeyUp}
|
|
962
|
+
part="chip">
|
|
962
963
|
<ft-ripple ?disabled=${!this.interactionsOnChip}></ft-ripple>
|
|
963
|
-
<ft-typography variant="body2" element="span" class="ft-chip--label">
|
|
964
|
+
<ft-typography variant="body2" element="span" class="ft-chip--label" part="label">
|
|
964
965
|
<slot @slotchange=${this.onSlotchange}></slot>
|
|
965
966
|
</ft-typography>
|
|
966
967
|
${this.internalIcon?this.renderIcon():null}
|
|
@@ -972,10 +973,11 @@ const V=Symbol.for(""),X=t=>{if(t?.r===V)return t?._$litStatic$},q=t=>({_$litSta
|
|
|
972
973
|
.iconVariant=${this.iconVariant}
|
|
973
974
|
icon="${this.internalIcon}"
|
|
974
975
|
label="${this.iconLabel}"
|
|
976
|
+
part="icon-button"
|
|
975
977
|
></ft-button>
|
|
976
978
|
`:e.html`
|
|
977
|
-
<div class="ft-chip--icon-container ft-no-text-select">
|
|
978
|
-
<ft-icon .variant=${this.iconVariant} .value="${this.internalIcon}"></ft-icon>
|
|
979
|
+
<div class="ft-chip--icon-container ft-no-text-select" part="icon-container">
|
|
980
|
+
<ft-icon .variant=${this.iconVariant} .value="${this.internalIcon}" part="icon"></ft-icon>
|
|
979
981
|
</div>
|
|
980
982
|
`}onKeyUp(t){this.interactionsOnChip&&["Enter"," "].includes(t.key)&&t.target.click()}onIconKeyUp(t){this.interactionsOnIcon&&["Enter"," "].includes(t.key)&&(t.stopPropagation(),this.dispatchEvent(new Si))}onIconClick(t){this.interactionsOnIcon&&(t.stopPropagation(),this.dispatchEvent(new Si))}getLabel(){return this.label||this.textContent}get textContent(){var t,o;return null!==(o=null===(t=this.slottedContent)||void 0===t?void 0:t.assignedNodes().map((t=>t.textContent)).join("").trim())&&void 0!==o?o:""}hasTextContent(){return this.textContent.length>0}onSlotchange(){this.requestUpdate()}get internalIcon(){return this.icon||(this.removable?"close":void 0)}}wi.elementDefinitions={"ft-ripple":_e,"ft-typography":vo,"ft-icon":Ve,"ft-button":fi},wi.styles=Oi,Ni([i.property({type:Boolean})],wi.prototype,"highlighted",void 0),Ni([i.property({type:Boolean})],wi.prototype,"removable",void 0),Ni([i.property({type:Boolean})],wi.prototype,"disabled",void 0),Ni([i.property({type:Boolean})],wi.prototype,"clickable",void 0),Ni([i.property({type:Boolean})],wi.prototype,"iconClickable",void 0),Ni([i.property({type:Boolean})],wi.prototype,"dense",void 0),Ni([i.property({type:Boolean})],wi.prototype,"multiLine",void 0),Ni([i.property()],wi.prototype,"label",void 0),Ni([i.property()],wi.prototype,"iconLabel",void 0),Ni([i.property()],wi.prototype,"icon",void 0),Ni([i.property()],wi.prototype,"iconVariant",void 0),Ni([i.property({type:Boolean})],wi.prototype,"trailingIcon",void 0),Ni([i.query("ft-typography slot")],wi.prototype,"slottedContent",void 0),o.customElement("ft-chip")(wi);const Ei=o.FtCssVariableFactory.create("--ft-floating-menu-z-index","","NUMBER","8"),$i=o.FtCssVariableFactory.create("--ft-floating-menu-max-width","","SIZE","300px"),Ci=o.FtCssVariableFactory.create("--ft-floating-menu-max-height","","SIZE","500px"),Ii=o.FtCssVariableFactory.extend("--ft-floating-menu-text-color","",o.designSystemVariables.colorOnSurfaceHigh),Ri=o.FtCssVariableFactory.external(o.designSystemVariables.colorSurface,"Design system"),Ui=o.FtCssVariableFactory.external(o.designSystemVariables.elevation02,"Design system"),ki=o.FtCssVariableFactory.external(o.designSystemVariables.borderRadiusS,"Design system"),Wi=e.css`
|
|
981
983
|
.ft-floating-menu {
|
|
@@ -1110,7 +1112,9 @@ const V=Symbol.for(""),X=t=>{if(t?.r===V)return t?._$litStatic$},q=t=>({_$litSta
|
|
|
1110
1112
|
class="${this.multiLine?"ft-reader-metadata-multi-line":""}"
|
|
1111
1113
|
text="${this.tooltipText}">
|
|
1112
1114
|
${this.useForSwitchingToRelatives&&this.metadata&&this.metadata.values.length>0&&this.relatives.length>0?this.renderSwitchToRelatives():e.html`
|
|
1113
|
-
<ft-chip part="chip"
|
|
1115
|
+
<ft-chip part="chip"
|
|
1116
|
+
exportpartsPrefix="chip"
|
|
1117
|
+
?multiLine=${this.multiLine}>
|
|
1114
1118
|
${this.renderContent()}
|
|
1115
1119
|
</ft-chip>
|
|
1116
1120
|
`}
|
|
@@ -1120,6 +1124,7 @@ const V=Symbol.for(""),X=t=>{if(t?.r===V)return t?._$litStatic$},q=t=>({_$litSta
|
|
|
1120
1124
|
<div part="floating-menu-container" class="ft-reader-metadata--container">
|
|
1121
1125
|
<ft-floating-menu part="floating-menu" text="Toggle collapsible" trailingIcon>
|
|
1122
1126
|
<ft-chip part="chip"
|
|
1127
|
+
exportpartsPrefix="chip"
|
|
1123
1128
|
?multiLine=${this.multiLine}
|
|
1124
1129
|
trailingIcon icon="thin_arrow"
|
|
1125
1130
|
slot="toggle"
|