@descope/web-components-ui 1.4.0 → 1.5.0
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/dist/cjs/index.cjs.js +11 -0
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +11 -0
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/descope-alert-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-alert/AlertClass.js +12 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[1456,5710],{35479:(e,t,r)=>{r.r(t),r.d(t,{AlertClass:()=>
|
|
1
|
+
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[1456,5710],{17166:(e,t,r)=>{r.d(t,{EA:()=>h,Ge:()=>i,Gh:()=>l,Ix:()=>d,mx:()=>s,q:()=>p,xE:()=>c});var n=r(18366),o=r(75777);const s=(e,t,{excludeAttrs:r=[],includeAttrs:n=[]})=>{const o=Array.from(e.attributes).filter((e=>!r.includes(e.name)&&(!n.length||n.includes(e.name)))).map((e=>e.name));t(o),new MutationObserver((e=>{e.forEach((e=>{"attributes"!==e.type||r.includes(e.attributeName)||n.length&&!n.includes(e.attributeName)||t([e.attributeName])}))})).observe(e,{attributes:!0})},i=(e,t)=>{t({addedNodes:Array.from(e.children),removedNodes:[]}),new MutationObserver((e=>{e.forEach((e=>{"childList"!==e.type&&"characterData"!==e.type||t(e)}))})).observe(e,{childList:!0,characterData:!0,subtree:!0})},a=(e,t,r={})=>n=>{n.forEach((n=>{const o=r[n]||n,s=e.getAttribute(n);null!==s?t.getAttribute(o)!==s&&t.setAttribute(o,s):t.removeAttribute(o)}))},l=(e,t,r)=>{s(e,a(e,t),r),s(t,a(t,e),r)},c=e=>(0,n.GL)(o.$m,e),d=(...e)=>`--${(0,n.GL)(...e)}`,h=(e,t,r={})=>{s(e,a(e,t,r.mapAttrs),r)},p=(e,t,r=[])=>{if(!r.length)return;const n=r.reduce(((t,r)=>Object.assign(t,{[r]:{get:()=>e[r],set(t){e[r]=t}}})),{});Object.defineProperties(t,n)}},75777:(e,t,r)=>{r.d(t,{$m:()=>n,IM:()=>s,aE:()=>o});const n="descope",o=3,s="host"},18366:(e,t,r)=>{r.d(t,{GL:()=>o,Tn:()=>a,Zz:()=>i,dk:()=>s,kW:()=>n});const n=e=>e.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),o=(...e)=>n(e.filter((e=>!!e)).join("-")),s=(...e)=>e.filter(Boolean).map(((e,t)=>{return 0===t?e:(r=e).charAt(0).toUpperCase()+r.slice(1);var r})).join(""),i=(...e)=>t=>e.reduceRight(((e,t)=>t(e)),t),a=e=>"function"==typeof e},35479:(e,t,r)=>{r.r(t),r.d(t,{AlertClass:()=>p,componentName:()=>c}),r(94694);var n=r(94619),o=r(7138),s=r(14944),i=r(70263),a=r(96431),l=r(17166);const c=(0,s.xE)("alert");class d extends((0,i.q)({componentName:c,baseSelector:":host > div"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n <style>\n :host {\n display: inline-flex;\n }\n :host > div {\n display: flex;\n width: 100%;\n }\n :host([empty="true"]) {\n display: none;\n }\n .icon {\n flex-shrink: 0;\n }\n .content {\n display: flex;\n flex-wrap: wrap;\n white-space: normal;\n overflow-wrap: break-word;\n }\n </style>\n <div>\n <div class="icon"></div>\n <div class="content">\n <descope-enriched-text>\n <slot></slot>\n </descope-enriched-text>\n </div>\n </div>\n '}init(){super.init?.(),this.slotEle=this.shadowRoot.querySelector("slot"),this.textComp=this.shadowRoot.querySelector("descope-enriched-text"),this.slotEle.addEventListener("slotchange",this.handleSlotChange.bind(this)),(0,l.Gh)(this.textComp,this,{includeAttrs:["empty"]}),(0,l.Ge)(this,this.handleChildrenChange.bind(this)),(0,s.EA)(this,this.textComp,{includeAttrs:["variant","full-width","link-target-blank"]})}handleChildrenChange(){this.textComp.textContent=this.textContent}handleSlotChange(){const e=this.slotEle.assignedNodes({flatten:!0});e.length&&(this.textComp.textContent=e[0]?.textContent||"")}}const{icon:h}={icon:{selector:()=>".icon"}},p=(0,o.Zz)((0,n.RF)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostDirection:{selector:()=>":host",property:"direction"},textColor:{selector:a.m.componentName,property:a.m.cssVarList.textColor},backgroundColor:{},borderColor:{},borderWidth:{},borderStyle:{},borderRadius:{},fontSize:[{},{selector:a.m.componentName,property:a.m.cssVarList.fontSize}],gap:{},horizontalPadding:[{property:"padding-top"},{property:"padding-bottom"}],verticalPadding:[{property:"padding-right"},{property:"padding-left"}],alignItems:{},justifyContent:{},icon:[{...h,property:"content"},{...h,property:"display",fallback:"none"}],iconSize:[{...h,property:"width"},{...h,property:"height"}]}}),(0,n.RF)({componentNameOverride:(0,s.xE)("enriched-text")}),(0,n.RF)({componentNameOverride:(0,s.xE)("text")}),n.VO,n.tQ)(d);customElements.define(c,p)},96431:(e,t,r)=>{r.d(t,{T:()=>d,m:()=>p});var n=r(92540),o=r(94619),s=r(7138),i=r(14944),a=r(74136),l=r(70263),c=r(62583);const d=(0,i.xE)("enriched-text");class h extends((0,l.q)({componentName:d,baseSelector:":host > div"})){#e;#t;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n <style>\n :host {\n line-height: 1em;\n word-break: break-word;\n }\n :host > slot {\n width: 100%;\n display: inline-block;\n }\n *, *:last-child {\n margin: 0;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p {\n margin-bottom: 1em;\n }\n a {\n cursor: pointer;\n }\n blockquote {\n padding: 0 2em;\n }\n u {\n text-decoration: underline\n }\n s {\n color: currentColor;\n }\n </style>\n <div class="content"></div>\n ',this.#r(),(0,i.Ge)(this,this.#n.bind(this))}static get observedAttributes(){return["readonly","link-target-blank"]}attributeChangedCallback(e,t,r){super.attributeChangedCallback?.(e,t,r),r!==t&&("readonly"===e&&this.onReadOnlyChange("true"===r),"link-target-blank"===e&&this.#r())}customUnderlineRenderer(){this.processor.renderer.rules.em_open=(e,t,r,n,o)=>("_"===e[t].markup&&(e[t].tag="u"),this.#t(e,t,r,n,o)),this.processor.renderer.rules.em_close=(e,t,r,n,o)=>("_"===e[t].markup&&(e[t].tag="u"),this.#t(e,t,r,n,o))}#o(){this.linkTargetBlank?this.processor.renderer.rules.link_open=(e,t,r,n,o)=>(e[t].attrSet("target","_blank"),this.#e(e,t,r,n,o)):this.processor.renderer.rules.link_open=this.#e}#s(){this.processor&&this.processor.disable(a.M)}#i(){this.#s()}#a(){this.#e=this.processor.renderer.rules.link_open||((e,t,r,n,o)=>o.renderToken(e,t,r)),this.#t=this.processor.renderer.rules.em_open||((e,t,r,n,o)=>o.renderToken(e,t,r))}#r(){this.processor=new n.A("commonmark",{html:!0}),this.#a(),this.#i(),this.#o(),this.customUnderlineRenderer()}get linkTargetBlank(){return"true"===this.getAttribute("link-target-blank")}get contentNode(){return this.shadowRoot.querySelector(".content")}#n(){if(!this.processor)return;let e=(0,c.G)(this.innerHTML);!e?.trim()&&this.isConnected?this.setAttribute("empty","true"):this.removeAttribute("empty");try{const t=this.processor.parse(e,{references:void 0});e=this.processor.renderer.render(t,{html:!0,breaks:!0})}catch(e){console.warn("Not parsing invalid markdown token")}this.contentNode.innerHTML=e}onReadOnlyChange(e){e?this.contentNode.setAttribute("inert",e):this.contentNode.removeAttribute("inert")}}const p=(0,s.Zz)((0,o.RF)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostDisplay:{selector:()=>":host",property:"display",fallback:"inline-block"},hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},fontFamily:{},fontWeight:{},fontWeightBold:[{selector:()=>":host strong",property:"font-weight"},{selector:()=>":host b",property:"font-weight"}],textColor:{property:"color"},textLineHeight:{property:"line-height"},textAlign:{},linkColor:{selector:"a",property:"color"},linkTextDecoration:{selector:"a",property:"text-decoration"},linkHoverTextDecoration:{selector:"a:hover",property:"text-decoration"},minHeight:{},minWidth:{}}}),(0,o.RF)({componentNameOverride:(0,i.xE)("link")}),(0,o.RF)({componentNameOverride:(0,i.xE)("text")}),o.VO,o.tQ)(h)},74136:(e,t,r)=>{r.d(t,{M:()=>n});const n=["blockquote","list","image","table","code","hr","backticks","fence","reference","heading","lheading","html_block"]},62583:(e,t,r)=>{r.d(t,{G:()=>n});const n=e=>{const t=document.createElement("textarea");return t.innerHTML=e,t.value}},94694:(e,t,r)=>{r.r(t),r.d(t,{EnrichedTextClass:()=>n.m,componentName:()=>n.T});var n=r(96431);customElements.define(n.T,n.m)}}]);
|
package/package.json
CHANGED
|
@@ -3,6 +3,7 @@ import { compose } from '../../helpers';
|
|
|
3
3
|
import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
|
|
4
4
|
import { createBaseClass } from '../../baseClasses/createBaseClass';
|
|
5
5
|
import { EnrichedTextClass } from '../descope-enriched-text/EnrichedTextClass';
|
|
6
|
+
import { observeChildren, syncAttrs } from '@descope-ui/common/components-helpers';
|
|
6
7
|
|
|
7
8
|
export const componentName = getComponentName('alert');
|
|
8
9
|
|
|
@@ -19,6 +20,9 @@ class RawAlert extends createBaseClass({ componentName, baseSelector: ':host > d
|
|
|
19
20
|
display: flex;
|
|
20
21
|
width: 100%;
|
|
21
22
|
}
|
|
23
|
+
:host([empty="true"]) {
|
|
24
|
+
display: none;
|
|
25
|
+
}
|
|
22
26
|
.icon {
|
|
23
27
|
flex-shrink: 0;
|
|
24
28
|
}
|
|
@@ -48,11 +52,19 @@ class RawAlert extends createBaseClass({ componentName, baseSelector: ':host > d
|
|
|
48
52
|
|
|
49
53
|
this.slotEle.addEventListener('slotchange', this.handleSlotChange.bind(this));
|
|
50
54
|
|
|
55
|
+
syncAttrs(this.textComp, this, { includeAttrs: ['empty'] });
|
|
56
|
+
|
|
57
|
+
observeChildren(this, this.handleChildrenChange.bind(this));
|
|
58
|
+
|
|
51
59
|
forwardAttrs(this, this.textComp, {
|
|
52
60
|
includeAttrs: ['variant', 'full-width', 'link-target-blank'],
|
|
53
61
|
});
|
|
54
62
|
}
|
|
55
63
|
|
|
64
|
+
handleChildrenChange() {
|
|
65
|
+
this.textComp.textContent = this.textContent;
|
|
66
|
+
}
|
|
67
|
+
|
|
56
68
|
handleSlotChange() {
|
|
57
69
|
const assignedNodes = this.slotEle.assignedNodes({ flatten: true });
|
|
58
70
|
if (!assignedNodes.length) return;
|