UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

5 lines (4 loc) 3.95 kB
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified. See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details. v3.2.1 */ import{a as p,b as u}from"./ESHROPVK.js";import"./VAHSXLFS.js";import{a as h}from"./YXZ62PQO.js";import{d as f}from"./CKRTMNFR.js";import{u as m}from"./3ADX47DD.js";import{a as g}from"./JOSABGK6.js";import"./NNVH7JUI.js";import{E as c,F as t,R as d,c as l,d as i,q as r}from"./BJZTU5BQ.js";var e={container:"container",header:"header",heading:"heading",close:"close",imageFrame:"image-frame",content:"content",info:"info",infoNoThumbnail:"info--no-thumbnail"},$={close:"x"},y={thumbnail:"thumbnail"},T=l`:host{position:relative;margin:1rem;box-sizing:border-box;display:flex;flex-direction:row;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-2);background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-2)}:host *{box-sizing:border-box}.container{inline-size:100%;padding:1rem}:host([closed]),:host([closed]) .container{display:none}:host([selected]) .container{margin:0;border-style:none;padding:0}.header{margin:0;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0;padding:0;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:.5rem}.header{margin-block-end:.5rem}.header .heading{padding:0;font-size:var(--calcite-font-size-0);line-height:1.25rem;color:var(--calcite-color-text-1)}.container[hidden]{display:none}.content{display:flex}.info{padding-block:0px;padding-inline:1rem;inline-size:70%}.info--no-thumbnail{inline-size:100%;padding-inline:0px}::slotted(p){margin-block-start:0px}::slotted(a){outline-color:transparent;color:var(--calcite-color-brand)}::slotted(a:focus){outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.image-frame{inline-size:25%}.image-frame img{max-inline-size:100%}::slotted(img){max-inline-size:100%}:host([hidden]){display:none}[hidden]{display:none}`,o=class extends c{constructor(){super(...arguments),this.messages=f(),this.hasThumbnail=!1,this.closeDisabled=!1,this.closed=!1,this.selected=!1,this.calciteTipDismiss=r({cancelable:!1})}static{this.properties={hasThumbnail:[16,{},{state:!0}],closeDisabled:[7,{},{reflect:!0,type:Boolean}],closed:[7,{},{reflect:!0,type:Boolean}],heading:1,headingLevel:[11,{},{type:Number,reflect:!0}],messageOverrides:[0,{},{attribute:!1}],selected:[7,{},{reflect:!0,type:Boolean}]}}static{this.styles=T}async load(){g.deprecated("component",{name:"tip",removalVersion:4,suggested:["card","notice","panel","tile"]})}hideTip(){this.closed=!0,this.calciteTipDismiss.emit()}handleThumbnailSlotChange(n){this.hasThumbnail=m(n)}renderHeader(){let{heading:n,headingLevel:a,el:b}=this,s=b.closest("calcite-tip-manager")?.headingLevel,v=s?p(s+1):null,x=a||v;return n?i`<header class=${t(e.header)}>${u({class:e.heading,level:x,children:n})}</header>`:null}renderDismissButton(){let{closeDisabled:n,hideTip:a}=this;return n?null:i`<calcite-action class=${t(e.close)} .icon=${$.close} @click=${a} scale=l .text=${this.messages.close}></calcite-action>`}renderImageFrame(){return h("thumbnail",i`<div class=${t(e.imageFrame)} .hidden=${!this.hasThumbnail}><slot name=${y.thumbnail} @slotchange=${this.handleThumbnailSlotChange}></slot></div>`)}renderInfoNode(){return i`<div class=${t({[e.info]:!0,[e.infoNoThumbnail]:!this.hasThumbnail})}><slot></slot></div>`}renderContent(){return i`<div class=${t(e.content)}>${this.renderImageFrame()}${this.renderInfoNode()}</div>`}render(){return i`<article class=${t(e.container)}>${this.renderHeader()}${this.renderContent()}</article>${this.renderDismissButton()}`}};d("calcite-tip",o);export{o as Tip};