Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
skateui - npm Package Compare versions
Comparing version 0.2.2 to 0.2.3
| 'use strict'; | ||
| //# sourceMappingURL=index.cjs.js.map |
@@ -5,19 +5,14 @@ 'use strict'; | ||
| const index = require('./index-3d5ce4cb.js'); | ||
| const index = require('./index-4f76c325.js'); | ||
| const appGlobals = require('./app-globals-3a1e7e63.js'); | ||
| /* | ||
| Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com | ||
| */ | ||
| const patchEsm = () => { | ||
| return index.promiseResolve(); | ||
| const defineCustomElements = async (win, options) => { | ||
| if (typeof window === 'undefined') return undefined; | ||
| await appGlobals.globalScripts(); | ||
| return index.bootstrapLazy([["sui-flextext_5.cjs",[[1,"sui-flextext",{"minSize":[1026,"min-size"],"maxSize":[1026,"max-size"]}],[1,"sui-nav",{"autoHide":[2,"auto-hide"]}],[1,"sui-overlay",{"position":[1],"transitionTime":[1,"transition-time"],"close":[64],"open":[64]}],[1,"sui-textarea",{"value":[1025],"disabled":[4],"el":[16],"textValue":[32]},null,{"value":["valueHandler"]}],[1,"sui-tooltip",{"classNames":[32],"tipBackgroundColor":[32]},[[1,"mouseenter","setPosition"]]]]]], options); | ||
| }; | ||
| const defineCustomElements = (win, options) => { | ||
| if (typeof window === 'undefined') return Promise.resolve(); | ||
| return patchEsm().then(() => { | ||
| return index.bootstrapLazy([["sui-flextext_5.cjs",[[1,"sui-flextext",{"minSize":[1026,"min-size"],"maxSize":[1026,"max-size"]}],[1,"sui-nav",{"autoHide":[2,"auto-hide"]}],[1,"sui-overlay",{"position":[1],"transitionTime":[1,"transition-time"],"close":[64],"open":[64]}],[1,"sui-textarea",{"value":[1025],"disabled":[4],"el":[16],"textValue":[32]}],[1,"sui-tooltip",{"maxWidth":[32],"classNames":[32],"tipBackgroundColor":[32]},[[1,"mouseenter","setPosition"]]]]]], options); | ||
| }); | ||
| }; | ||
| exports.setNonce = index.setNonce; | ||
| exports.defineCustomElements = defineCustomElements; | ||
| //# sourceMappingURL=loader.cjs.js.map |
@@ -5,20 +5,24 @@ 'use strict'; | ||
| const index = require('./index-3d5ce4cb.js'); | ||
| const index = require('./index-4f76c325.js'); | ||
| const appGlobals = require('./app-globals-3a1e7e63.js'); | ||
| /* | ||
| Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com | ||
| Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com | ||
| */ | ||
| const patchBrowser = () => { | ||
| const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('skateui.cjs.js', document.baseURI).href)); | ||
| const opts = {}; | ||
| if (importMeta !== '') { | ||
| opts.resourcesUrl = new URL('.', importMeta).href; | ||
| } | ||
| return index.promiseResolve(opts); | ||
| var patchBrowser = () => { | ||
| const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('skateui.cjs.js', document.baseURI).href)); | ||
| const opts = {}; | ||
| if (importMeta !== "") { | ||
| opts.resourcesUrl = new URL(".", importMeta).href; | ||
| } | ||
| return index.promiseResolve(opts); | ||
| }; | ||
| patchBrowser().then(options => { | ||
| return index.bootstrapLazy([["sui-flextext_5.cjs",[[1,"sui-flextext",{"minSize":[1026,"min-size"],"maxSize":[1026,"max-size"]}],[1,"sui-nav",{"autoHide":[2,"auto-hide"]}],[1,"sui-overlay",{"position":[1],"transitionTime":[1,"transition-time"],"close":[64],"open":[64]}],[1,"sui-textarea",{"value":[1025],"disabled":[4],"el":[16],"textValue":[32]}],[1,"sui-tooltip",{"maxWidth":[32],"classNames":[32],"tipBackgroundColor":[32]},[[1,"mouseenter","setPosition"]]]]]], options); | ||
| patchBrowser().then(async (options) => { | ||
| await appGlobals.globalScripts(); | ||
| return index.bootstrapLazy([["sui-flextext_5.cjs",[[1,"sui-flextext",{"minSize":[1026,"min-size"],"maxSize":[1026,"max-size"]}],[1,"sui-nav",{"autoHide":[2,"auto-hide"]}],[1,"sui-overlay",{"position":[1],"transitionTime":[1,"transition-time"],"close":[64],"open":[64]}],[1,"sui-textarea",{"value":[1025],"disabled":[4],"el":[16],"textValue":[32]},null,{"value":["valueHandler"]}],[1,"sui-tooltip",{"classNames":[32],"tipBackgroundColor":[32]},[[1,"mouseenter","setPosition"]]]]]], options); | ||
| }); | ||
| exports.setNonce = index.setNonce; | ||
| //# sourceMappingURL=skateui.cjs.js.map |
@@ -5,407 +5,413 @@ 'use strict'; | ||
| const index = require('./index-3d5ce4cb.js'); | ||
| const index = require('./index-4f76c325.js'); | ||
| const suiFlextextCss = ":host{display:block;cursor:default;font-size:var(--auto-size);line-height:1}"; | ||
| const SuiFlextextStyle0 = suiFlextextCss; | ||
| const SuiFlextext = class { | ||
| constructor(hostRef) { | ||
| index.registerInstance(this, hostRef); | ||
| this.fontSize = null; | ||
| this.adjustSize = () => { | ||
| const lineHeightRatio = Number(this.computedStyle.lineHeight.replace('px', '')) / this.fontSize; | ||
| if (!this.host.textContent) { | ||
| this.fontSize = this.maxSize; | ||
| } | ||
| else { | ||
| const scaleDown = () => { | ||
| let height = parseFloat(this.computedStyle.height); | ||
| let howmanylines = height / (this.fontSize * lineHeightRatio); | ||
| if (howmanylines > 1 && this.fontSize > this.minSize) { | ||
| let minus = this.fontSize - 1; | ||
| this.fontSize = minus > this.minSize ? minus : this.minSize; | ||
| this.host.style.setProperty('--auto-size', `${this.fontSize}px`); | ||
| if (this.fontSize === this.minSize) { | ||
| return; | ||
| constructor(hostRef) { | ||
| index.registerInstance(this, hostRef); | ||
| this.fontSize = null; | ||
| this.adjustSize = () => { | ||
| let lineHeight = Number(this.computedStyle.lineHeight.replace('px', '')); | ||
| lineHeight = isNaN(lineHeight) ? this.fontSize : lineHeight; | ||
| let lineHeightRatio = lineHeight / this.fontSize; | ||
| lineHeightRatio = lineHeightRatio > 1 ? lineHeightRatio : 1; | ||
| if (!this.host.textContent) { | ||
| this.fontSize = this.maxSize; | ||
| } | ||
| scaleDown(); | ||
| } | ||
| }; | ||
| const scaleUp = () => { | ||
| let height = parseFloat(this.computedStyle.height); | ||
| let howmanylines = height / (this.fontSize * lineHeightRatio); | ||
| if (howmanylines <= 1 && this.fontSize < this.maxSize) { | ||
| let plus = this.fontSize + 1; | ||
| this.fontSize = plus < this.maxSize ? plus : this.maxSize; | ||
| this.host.style.setProperty('--auto-size', `${this.fontSize}px`); | ||
| if (this.fontSize === this.maxSize) { | ||
| return; | ||
| else { | ||
| const scaleDown = () => { | ||
| let height = parseFloat(this.computedStyle.height); | ||
| let howmanylines = height / (this.fontSize * lineHeightRatio); | ||
| if (howmanylines > 1 && this.fontSize > this.minSize) { | ||
| let minus = this.fontSize - 1; | ||
| this.fontSize = minus > this.minSize ? minus : this.minSize; | ||
| this.host.style.setProperty('--auto-size', `${this.fontSize}px`); | ||
| if (this.fontSize === this.minSize) { | ||
| return; | ||
| } | ||
| scaleDown(); | ||
| } | ||
| }; | ||
| const scaleUp = () => { | ||
| let height = parseFloat(this.computedStyle.height); | ||
| let howmanylines = height / (this.fontSize * lineHeightRatio); | ||
| if (howmanylines <= 1 && this.fontSize < this.maxSize) { | ||
| let plus = this.fontSize + 1; | ||
| this.fontSize = plus < this.maxSize ? plus : this.maxSize; | ||
| this.host.style.setProperty('--auto-size', `${this.fontSize}px`); | ||
| if (this.fontSize === this.maxSize) { | ||
| return; | ||
| } | ||
| scaleUp(); | ||
| } | ||
| else { | ||
| scaleDown(); | ||
| } | ||
| }; | ||
| scaleUp(); | ||
| } | ||
| scaleUp(); | ||
| } | ||
| }; | ||
| scaleUp(); | ||
| scaleDown(); | ||
| } | ||
| }; | ||
| this.minSize = 0; | ||
| this.maxSize = 72; | ||
| } | ||
| componentWillLoad() { | ||
| this.maxSize = this.maxSize && typeof this.maxSize !== 'number' ? Number(this.maxSize) : this.maxSize; | ||
| this.minSize = this.minSize && typeof this.minSize !== 'number' ? Number(this.minSize) : this.minSize; | ||
| if (isNaN(this.maxSize)) { | ||
| this.maxSize = 72; | ||
| this.minSize = 0; | ||
| this.maxSize = 72; | ||
| } | ||
| if (isNaN(this.minSize)) { | ||
| this.minSize = 0; | ||
| componentWillLoad() { | ||
| this.maxSize = this.maxSize && typeof this.maxSize !== 'number' ? Number(this.maxSize) : this.maxSize; | ||
| this.minSize = this.minSize && typeof this.minSize !== 'number' ? Number(this.minSize) : this.minSize; | ||
| this.maxSize = parseInt(this.maxSize); | ||
| this.minSize = parseInt(this.minSize); | ||
| if (isNaN(this.maxSize)) { | ||
| this.maxSize = 72; | ||
| } | ||
| if (isNaN(this.minSize)) { | ||
| this.minSize = this.fontSize; | ||
| } | ||
| this.computedStyle = window.getComputedStyle(this.host); | ||
| this.fontSize = Number(this.computedStyle.fontSize.replace('px', '')); | ||
| if (this.minSize > this.maxSize) { | ||
| this.maxSize = this.minSize; | ||
| } | ||
| } | ||
| this.computedStyle = window.getComputedStyle(this.host); | ||
| this.fontSize = Number(this.computedStyle.fontSize.replace('px', '')); | ||
| if (this.minSize === 0) { | ||
| this.minSize = this.fontSize; | ||
| componentDidLoad() { | ||
| this.adjustSize(); | ||
| window.addEventListener("resize", this.adjustSize.bind(this)); | ||
| } | ||
| if (this.minSize > this.maxSize) { | ||
| this.maxSize = this.minSize; | ||
| disconnectedCallback() { | ||
| window.removeEventListener('resize', this.adjustSize.bind(this)); | ||
| } | ||
| } | ||
| componentDidLoad() { | ||
| this.adjustSize(); | ||
| window.addEventListener("resize", this.adjustSize.bind(this)); | ||
| } | ||
| disconnectedCallback() { | ||
| window.removeEventListener('resize', this.adjustSize.bind(this)); | ||
| } | ||
| render() { | ||
| return (index.h(index.Host, null, index.h("slot", null))); | ||
| } | ||
| get host() { return index.getElement(this); } | ||
| render() { | ||
| return (index.h(index.Host, { key: 'a481ea1f996d1da4b4bf77b331dcdf9908d76373' }, index.h("slot", { key: '7fd70a27be055a44528e307c8af8e8d8e4b85db7' }))); | ||
| } | ||
| get host() { return index.getElement(this); } | ||
| }; | ||
| SuiFlextext.style = suiFlextextCss; | ||
| SuiFlextext.style = SuiFlextextStyle0; | ||
| const suiNavCss = ":host{display:block;width:100%;transform:translateY(var(--nav-top));position:var(--nav-position);top:0;z-index:1}"; | ||
| const SuiNavStyle0 = suiNavCss; | ||
| const SuiNav = class { | ||
| constructor(hostRef) { | ||
| index.registerInstance(this, hostRef); | ||
| this.scrollOffset = 0; | ||
| this.topOffset = 0; | ||
| this.offsetProp = 'pageYOffset'; | ||
| // ! should be variable with bind ! | ||
| // this way we can remove the event when component is destroyed | ||
| this.calcNavbarPosition = (function () { | ||
| window.requestAnimationFrame(() => { | ||
| const navHeight = parseInt(this.navCss.height); | ||
| const scrollOffset = this.parent[this.offsetProp] < 0 ? 0 : this.parent[this.offsetProp]; // on mobile, offsetProp can be negative | ||
| const offsetDifference = (this.scrollOffset - scrollOffset) / this.autoHide; | ||
| const topOffset = (() => { | ||
| let topOffset = this.topOffset + offsetDifference; | ||
| if (topOffset < -navHeight) { | ||
| // if offset is beyond navHeight | ||
| return -navHeight; | ||
| } | ||
| if (topOffset > 0) { | ||
| // offset is positive | ||
| return 0; | ||
| } | ||
| return topOffset; // return int range | ||
| })(); | ||
| this.scrollOffset = scrollOffset; // update scroll offset | ||
| this.topOffset = topOffset; | ||
| this.host.style.setProperty('--nav-top', `${topOffset}px`); // apply css variable | ||
| }); | ||
| }).bind(this); | ||
| this.autoHide = undefined; | ||
| } | ||
| componentWillLoad() { | ||
| if (this.autoHide === undefined) { | ||
| // no given attribute | ||
| return; | ||
| constructor(hostRef) { | ||
| index.registerInstance(this, hostRef); | ||
| this.scrollOffset = 0; | ||
| this.topOffset = 0; | ||
| this.offsetProp = 'pageYOffset'; | ||
| // ! should be variable with bind ! | ||
| // this way we can remove the event when component is destroyed | ||
| this.calcNavbarPosition = (function () { | ||
| window.requestAnimationFrame(() => { | ||
| const navHeight = parseInt(this.navCss.height); | ||
| const scrollOffset = this.parent[this.offsetProp] < 0 ? 0 : this.parent[this.offsetProp]; // on mobile, offsetProp can be negative | ||
| const offsetDifference = (this.scrollOffset - scrollOffset) / this.autoHide; | ||
| const topOffset = (() => { | ||
| let topOffset = this.topOffset + offsetDifference; | ||
| if (topOffset < -navHeight) { | ||
| // if offset is beyond navHeight | ||
| return -navHeight; | ||
| } | ||
| if (topOffset > 0) { | ||
| // offset is positive | ||
| return 0; | ||
| } | ||
| return topOffset; // return int range | ||
| })(); | ||
| this.scrollOffset = scrollOffset; // update scroll offset | ||
| this.topOffset = topOffset; | ||
| this.host.style.setProperty('--nav-top', `${topOffset}px`); // apply css variable | ||
| }); | ||
| }).bind(this); | ||
| this.autoHide = undefined; | ||
| } | ||
| if (!this.autoHide) { | ||
| // attribute exists but empty value. set to default. | ||
| this.autoHide = 3; | ||
| } | ||
| if (this.autoHide) { | ||
| if (typeof this.autoHide === 'string') { | ||
| // html attributes are string | ||
| try { | ||
| this.autoHide = JSON.parse(this.autoHide); | ||
| componentWillLoad() { | ||
| if (this.autoHide === undefined) { | ||
| // no given attribute | ||
| return; | ||
| } | ||
| catch (err) { | ||
| this.autoHide = 0; | ||
| if (!this.autoHide) { | ||
| // attribute exists but empty value. set to default. | ||
| this.autoHide = 3; | ||
| } | ||
| } | ||
| if (typeof this.autoHide === 'boolean') { | ||
| // if 'true' | 'false' is given. | ||
| this.autoHide = this.autoHide ? 3 : 0; | ||
| } | ||
| else if (typeof this.autoHide === 'number') { | ||
| if (this.autoHide < 0) { | ||
| // if value is less than 0 | ||
| this.autoHide = 0; | ||
| if (this.autoHide) { | ||
| if (typeof this.autoHide === 'string') { | ||
| // html attributes are string | ||
| try { | ||
| this.autoHide = JSON.parse(this.autoHide); | ||
| } | ||
| catch (err) { | ||
| this.autoHide = 0; | ||
| } | ||
| } | ||
| if (typeof this.autoHide === 'boolean') { | ||
| // if 'true' | 'false' is given. | ||
| this.autoHide = this.autoHide ? 3 : 0; | ||
| } | ||
| else if (typeof this.autoHide === 'number') { | ||
| if (this.autoHide < 0) { | ||
| // if value is less than 0 | ||
| this.autoHide = 0; | ||
| } | ||
| } | ||
| else { | ||
| // other types are not allowed | ||
| this.autoHide = 0; | ||
| } | ||
| } | ||
| } | ||
| else { | ||
| // other types are not allowed | ||
| this.autoHide = 0; | ||
| } | ||
| } | ||
| } | ||
| disconnectedCallback() { | ||
| // remove windows event | ||
| if (this.offsetProp === 'pageYOffset') { | ||
| document.removeEventListener('scroll', this.calcNavbarPosition); | ||
| } | ||
| else { | ||
| this.parent.removeEventListener('scroll', this.calcNavbarPosition); | ||
| } | ||
| } | ||
| componentDidLoad() { | ||
| this.navCss = window.getComputedStyle(this.host); | ||
| this.host.style.setProperty('--nav-position', 'sticky'); // apply css variable | ||
| if (this.autoHide) { | ||
| let seekScrollableParent = (el) => { | ||
| if (el) { | ||
| if (el.scrollHeight > el.clientHeight && 'hidden' !== window.getComputedStyle(el).overflowY) { | ||
| return el; | ||
| } | ||
| else { | ||
| return seekScrollableParent(el.parentElement); | ||
| } | ||
| disconnectedCallback() { | ||
| // remove windows event | ||
| if (this.offsetProp === 'pageYOffset') { | ||
| document.removeEventListener('scroll', this.calcNavbarPosition); | ||
| } | ||
| else { | ||
| return el; | ||
| this.parent.removeEventListener('scroll', this.calcNavbarPosition); | ||
| } | ||
| }; | ||
| let scrollableParent = seekScrollableParent(this.host.parentElement); | ||
| if (scrollableParent && scrollableParent.tagName.toLowerCase() !== 'html') { | ||
| this.offsetProp = 'scrollTop'; | ||
| this.parent = scrollableParent; | ||
| this.parent.addEventListener('scroll', this.calcNavbarPosition, { passive: true }); | ||
| } | ||
| else { | ||
| this.parent = window; | ||
| document.addEventListener('scroll', this.calcNavbarPosition, { passive: true }); | ||
| } | ||
| } | ||
| } | ||
| render() { | ||
| return (index.h(index.Host, null, index.h("slot", null))); | ||
| } | ||
| get host() { return index.getElement(this); } | ||
| componentDidLoad() { | ||
| this.navCss = window.getComputedStyle(this.host); | ||
| this.host.style.setProperty('--nav-position', 'sticky'); // apply css variable | ||
| if (this.autoHide) { | ||
| let seekScrollableParent = (el) => { | ||
| if (el) { | ||
| if (el.scrollHeight > el.clientHeight && 'hidden' !== window.getComputedStyle(el).overflowY) { | ||
| return el; | ||
| } | ||
| else { | ||
| return seekScrollableParent(el.parentElement); | ||
| } | ||
| } | ||
| else { | ||
| return el; | ||
| } | ||
| }; | ||
| let scrollableParent = seekScrollableParent(this.host.parentElement); | ||
| if (scrollableParent && scrollableParent.tagName.toLowerCase() !== 'html') { | ||
| this.offsetProp = 'scrollTop'; | ||
| this.parent = scrollableParent; | ||
| this.parent.addEventListener('scroll', this.calcNavbarPosition, { passive: true }); | ||
| } | ||
| else { | ||
| this.parent = window; | ||
| document.addEventListener('scroll', this.calcNavbarPosition, { passive: true }); | ||
| } | ||
| } | ||
| } | ||
| render() { | ||
| return (index.h(index.Host, { key: '00e45c411ec831a66dd29d039568f57fc97b3930' }, index.h("slot", { key: '844be28b7e12419c0cf5dae28db5e3db313a4004' }))); | ||
| } | ||
| get host() { return index.getElement(this); } | ||
| }; | ||
| SuiNav.style = suiNavCss; | ||
| SuiNav.style = SuiNavStyle0; | ||
| const eventList = [ | ||
| // 'abort' | ||
| // , | ||
| // 'animationend' | ||
| // , | ||
| // 'animationiteration' | ||
| // , | ||
| // 'animationstart' | ||
| // , | ||
| // 'auxclick' | ||
| // , | ||
| 'beforecopy', | ||
| 'beforecut', | ||
| 'beforeinput', | ||
| // 'beforematch' | ||
| // , | ||
| 'beforepaste', | ||
| // 'beforexrselect' | ||
| // , | ||
| 'blur', | ||
| // 'cancel' | ||
| // , | ||
| // 'canplay' | ||
| // , | ||
| // 'canplaythrough' | ||
| // , | ||
| 'change', | ||
| 'click', | ||
| // 'close' | ||
| // , | ||
| 'contextlost', | ||
| 'contextmenu', | ||
| 'contextrestored', | ||
| 'copy', | ||
| // 'cuechange' | ||
| // , | ||
| 'cut', | ||
| 'dblclick', | ||
| 'drag', | ||
| 'dragend', | ||
| 'dragenter', | ||
| 'dragleave', | ||
| 'dragover', | ||
| 'dragstart', | ||
| 'drop', | ||
| // 'durationchange' | ||
| // , | ||
| // 'emptied' | ||
| // , | ||
| // 'ended' | ||
| // , | ||
| // 'error' | ||
| // , | ||
| 'focus', | ||
| // 'formdata' | ||
| // , | ||
| // 'fullscreenchange' | ||
| // , | ||
| // 'fullscreenerror' | ||
| // , | ||
| // 'gotpointercapture' | ||
| // , | ||
| 'input', | ||
| 'invalid', | ||
| 'keydown', | ||
| 'keypress', | ||
| 'keyup', | ||
| // 'load' | ||
| // , | ||
| // 'loadeddata' | ||
| // , | ||
| // 'loadedmetadata' | ||
| // , | ||
| // 'loadstart' | ||
| // , | ||
| // 'lostpointercapture' | ||
| // , | ||
| 'mousedown', | ||
| // 'mouseenter' | ||
| // , | ||
| // 'mouseleave' | ||
| // , | ||
| 'mousemove', | ||
| 'mouseout', | ||
| 'mouseover', | ||
| 'mouseup', | ||
| 'mousewheel', | ||
| 'paste', | ||
| // 'pause' | ||
| // , | ||
| // 'play' | ||
| // , | ||
| // 'playing' | ||
| // , | ||
| // 'pointercancel' | ||
| // , | ||
| // 'pointerdown' | ||
| // , | ||
| // 'pointerenter' | ||
| // , | ||
| // 'pointerleave' | ||
| // , | ||
| // 'pointermove' | ||
| // , | ||
| // 'pointerout' | ||
| // , | ||
| // 'pointerover' | ||
| // , | ||
| // 'pointerrawupdate' | ||
| // , | ||
| // 'pointerup' | ||
| // , | ||
| // 'progress' | ||
| // , | ||
| // 'ratechange' | ||
| // , | ||
| 'reset', | ||
| // 'resize' | ||
| // , | ||
| // 'scroll' | ||
| // , | ||
| 'search', | ||
| // 'securitypolicyviolation' | ||
| // , | ||
| // 'seeked' | ||
| // , | ||
| // 'seeking' | ||
| // , | ||
| 'select', | ||
| // 'selectionchange' | ||
| // , | ||
| // 'selectstart' | ||
| // , | ||
| // 'slotchange' | ||
| // , | ||
| // 'stalled' | ||
| // , | ||
| 'submit', | ||
| // 'suspend' | ||
| // , | ||
| // 'timeupdate' | ||
| // , | ||
| // 'toggle' | ||
| // , | ||
| // 'transitioncancel' | ||
| // , | ||
| // 'transitionend' | ||
| // , | ||
| // 'transitionrun' | ||
| // , | ||
| // 'transitionstart' | ||
| // , | ||
| // 'volumechange' | ||
| // , | ||
| // 'waiting' | ||
| // , | ||
| // 'webkitanimationend' | ||
| // , | ||
| // 'webkitanimationiteration' | ||
| // , | ||
| // 'webkitanimationstart' | ||
| // , | ||
| // 'webkitfullscreenchange' | ||
| // , | ||
| // 'webkitfullscreenerror' | ||
| // , | ||
| // 'webkittransitionend' | ||
| // , | ||
| 'wheel' | ||
| // 'abort' | ||
| // , | ||
| // 'animationend' | ||
| // , | ||
| // 'animationiteration' | ||
| // , | ||
| // 'animationstart' | ||
| // , | ||
| // 'auxclick' | ||
| // , | ||
| 'beforecopy', | ||
| 'beforecut', | ||
| 'beforeinput', | ||
| // 'beforematch' | ||
| // , | ||
| 'beforepaste', | ||
| // 'beforexrselect' | ||
| // , | ||
| 'blur', | ||
| // 'cancel' | ||
| // , | ||
| // 'canplay' | ||
| // , | ||
| // 'canplaythrough' | ||
| // , | ||
| 'change', | ||
| 'click', | ||
| // 'close' | ||
| // , | ||
| 'contextlost', | ||
| 'contextmenu', | ||
| 'contextrestored', | ||
| 'copy', | ||
| // 'cuechange' | ||
| // , | ||
| 'cut', | ||
| 'dblclick', | ||
| 'drag', | ||
| 'dragend', | ||
| 'dragenter', | ||
| 'dragleave', | ||
| 'dragover', | ||
| 'dragstart', | ||
| 'drop', | ||
| // 'durationchange' | ||
| // , | ||
| // 'emptied' | ||
| // , | ||
| // 'ended' | ||
| // , | ||
| // 'error' | ||
| // , | ||
| 'focus', | ||
| // 'formdata' | ||
| // , | ||
| // 'fullscreenchange' | ||
| // , | ||
| // 'fullscreenerror' | ||
| // , | ||
| // 'gotpointercapture' | ||
| // , | ||
| 'input', | ||
| 'invalid', | ||
| 'keydown', | ||
| 'keypress', | ||
| 'keyup', | ||
| // 'load' | ||
| // , | ||
| // 'loadeddata' | ||
| // , | ||
| // 'loadedmetadata' | ||
| // , | ||
| // 'loadstart' | ||
| // , | ||
| // 'lostpointercapture' | ||
| // , | ||
| 'mousedown', | ||
| // 'mouseenter' | ||
| // , | ||
| // 'mouseleave' | ||
| // , | ||
| 'mousemove', | ||
| 'mouseout', | ||
| 'mouseover', | ||
| 'mouseup', | ||
| 'mousewheel', | ||
| 'paste', | ||
| // 'pause' | ||
| // , | ||
| // 'play' | ||
| // , | ||
| // 'playing' | ||
| // , | ||
| // 'pointercancel' | ||
| // , | ||
| // 'pointerdown' | ||
| // , | ||
| // 'pointerenter' | ||
| // , | ||
| // 'pointerleave' | ||
| // , | ||
| // 'pointermove' | ||
| // , | ||
| // 'pointerout' | ||
| // , | ||
| // 'pointerover' | ||
| // , | ||
| // 'pointerrawupdate' | ||
| // , | ||
| // 'pointerup' | ||
| // , | ||
| // 'progress' | ||
| // , | ||
| // 'ratechange' | ||
| // , | ||
| 'reset', | ||
| // 'resize' | ||
| // , | ||
| // 'scroll' | ||
| // , | ||
| 'search', | ||
| // 'securitypolicyviolation' | ||
| // , | ||
| // 'seeked' | ||
| // , | ||
| // 'seeking' | ||
| // , | ||
| 'select', | ||
| // 'selectionchange' | ||
| // , | ||
| // 'selectstart' | ||
| // , | ||
| // 'slotchange' | ||
| // , | ||
| // 'stalled' | ||
| // , | ||
| 'submit', | ||
| // 'suspend' | ||
| // , | ||
| // 'timeupdate' | ||
| // , | ||
| // 'toggle' | ||
| // , | ||
| // 'transitioncancel' | ||
| // , | ||
| // 'transitionend' | ||
| // , | ||
| // 'transitionrun' | ||
| // , | ||
| // 'transitionstart' | ||
| // , | ||
| // 'volumechange' | ||
| // , | ||
| // 'waiting' | ||
| // , | ||
| // 'webkitanimationend' | ||
| // , | ||
| // 'webkitanimationiteration' | ||
| // , | ||
| // 'webkitanimationstart' | ||
| // , | ||
| // 'webkitfullscreenchange' | ||
| // , | ||
| // 'webkitfullscreenerror' | ||
| // , | ||
| // 'webkittransitionend' | ||
| // , | ||
| 'wheel' | ||
| ]; | ||
| function cloneEvents(el, options) { | ||
| // clone events to another element | ||
| // callback | ||
| let { dispatchTo, eventCallback = null, bypass = [] } = options || {}; | ||
| let cb = (ev) => { | ||
| let new_ev = new Event(ev.type); | ||
| if (eventCallback && eventCallback.type === ev.type && typeof eventCallback.callback === 'function') { | ||
| eventCallback.callback(new_ev); | ||
| // clone events to another element | ||
| // callback | ||
| let { dispatchTo, eventCallback = null, bypass = [] } = options || {}; | ||
| let cb = (ev) => { | ||
| let new_ev = new Event(ev.type); | ||
| if (eventCallback && eventCallback.type === ev.type && typeof eventCallback.callback === 'function') { | ||
| eventCallback.callback(new_ev); | ||
| } | ||
| dispatchTo.dispatchEvent(new_ev); | ||
| }; | ||
| for (let name of eventList) { | ||
| if (!bypass.includes(name)) { | ||
| el.addEventListener(name, cb, { passive: name.includes('scroll') || name.includes('wheel') }); | ||
| } | ||
| } | ||
| dispatchTo.dispatchEvent(new_ev); | ||
| }; | ||
| for (let name of eventList) { | ||
| if (!bypass.includes(name)) { | ||
| el.addEventListener(name, cb, { passive: name.includes('scroll') || name.includes('wheel') }); | ||
| } | ||
| } | ||
| } | ||
| function getElementAttributes(nodeMap) { | ||
| if (nodeMap) { | ||
| const length = nodeMap.length; | ||
| return Object.keys(nodeMap).reduce((props, current) => { | ||
| try { | ||
| const numCurrent = parseInt(current); | ||
| if (numCurrent <= length) { | ||
| const property = nodeMap[current]; | ||
| return Object.assign(Object.assign({}, props), { [property.name]: property.value }); | ||
| } | ||
| } | ||
| catch (err) { } | ||
| }, {}); | ||
| } | ||
| return {}; | ||
| if (nodeMap) { | ||
| const length = nodeMap.length; | ||
| return Object.keys(nodeMap).reduce((props, current) => { | ||
| try { | ||
| const numCurrent = parseInt(current); | ||
| if (numCurrent <= length) { | ||
| const property = nodeMap[current]; | ||
| return Object.assign(Object.assign({}, props), { [property.name]: property.value }); | ||
| } | ||
| } | ||
| catch (err) { } | ||
| }, {}); | ||
| } | ||
| return {}; | ||
| } | ||
| function randomString(length = 5) { | ||
| // set random slot name to prevent users adding elements to the slot | ||
| let result = ''; | ||
| let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; | ||
| let charactersLength = characters.length; | ||
| for (let i = 0; i < length; i++) { | ||
| result += characters.charAt(Math.floor(Math.random() * charactersLength)); | ||
| } | ||
| return result; | ||
| // set random slot name to prevent users adding elements to the slot | ||
| let result = ''; | ||
| let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; | ||
| let charactersLength = characters.length; | ||
| for (let i = 0; i < length; i++) { | ||
| result += characters.charAt(Math.floor(Math.random() * charactersLength)); | ||
| } | ||
| return result; | ||
| } | ||
@@ -418,546 +424,546 @@ /** | ||
| function dummyHandler(options = {}) { | ||
| const { excludeStyle = [], excludeAttribute = [], trackNodes = false, log = false, mirrorStyle = null, moveIdToSlotElement = false, excludeEvents = [], bounceEvents = false, mirrorEvents = false } = options || {}; | ||
| excludeStyle.push(...['display', 'position', 'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height', 'font', 'box-sizing']); | ||
| const initEvents = () => { | ||
| if (mirrorEvents) { | ||
| // dispatch the host event to hidden this.el | ||
| let iter = (Array.isArray(mirrorEvents) && mirrorEvents.length ? mirrorEvents : eventList); | ||
| for (let name of iter) { | ||
| let cb; | ||
| if (typeof mirrorEvents === 'object' && Object.keys(mirrorEvents).length && !Array.isArray(mirrorEvents) && mirrorEvents.hasOwnProperty(name) && typeof mirrorEvents[name] === 'function') { | ||
| cb = mirrorEvents[name]; | ||
| const { excludeStyle = [], excludeAttribute = [], trackNodes = false, log = false, mirrorStyle = null, moveIdToSlotElement = false, excludeEvents = [], bounceEvents = false, mirrorEvents = false } = options || {}; | ||
| excludeStyle.push(...['display', 'position', 'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height', 'font', 'box-sizing']); | ||
| const initEvents = () => { | ||
| if (mirrorEvents) { | ||
| // dispatch the host event to hidden this.el | ||
| let iter = (Array.isArray(mirrorEvents) && mirrorEvents.length ? mirrorEvents : eventList); | ||
| for (let name of iter) { | ||
| let cb; | ||
| if (typeof mirrorEvents === 'object' && Object.keys(mirrorEvents).length && !Array.isArray(mirrorEvents) && mirrorEvents.hasOwnProperty(name) && typeof mirrorEvents[name] === 'function') { | ||
| cb = mirrorEvents[name]; | ||
| } | ||
| if (!excludeEvents.includes(name)) { | ||
| cb = cb || typeof mirrorEvents === 'function' ? mirrorEvents : (e) => { | ||
| this.el.dispatchEvent(new Event(e.type, { | ||
| bubbles: false | ||
| })); | ||
| }; | ||
| this.host.addEventListener(name, cb, { passive: name.includes('scroll') || name.includes('wheel') }); | ||
| } | ||
| } | ||
| } | ||
| if (!excludeEvents.includes(name)) { | ||
| cb = cb || typeof mirrorEvents === 'function' ? mirrorEvents : (e) => { | ||
| this.el.dispatchEvent(new Event(e.type, { | ||
| bubbles: false | ||
| })); | ||
| }; | ||
| this.host.addEventListener(name, cb, { passive: name.includes('scroll') || name.includes('wheel') }); | ||
| if (bounceEvents) { | ||
| // dispatch the host event to hidden this.el | ||
| let iter = (Array.isArray(bounceEvents) && bounceEvents.length ? bounceEvents : eventList); | ||
| for (let name of iter) { | ||
| let cb; | ||
| if (typeof bounceEvents === 'object' && Object.keys(bounceEvents).length && !Array.isArray(bounceEvents) && bounceEvents.hasOwnProperty(name) && typeof bounceEvents[name] === 'function') { | ||
| cb = bounceEvents[name]; | ||
| } | ||
| cb = cb || typeof bounceEvents === 'function' ? bounceEvents : (e) => { | ||
| if (!e.bubbles) { | ||
| this.host.dispatchEvent(new Event(e.type, { | ||
| bubbles: true | ||
| })); | ||
| } | ||
| }; | ||
| this.el.addEventListener(name, cb); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| if (bounceEvents) { | ||
| // dispatch the host event to hidden this.el | ||
| let iter = (Array.isArray(bounceEvents) && bounceEvents.length ? bounceEvents : eventList); | ||
| for (let name of iter) { | ||
| let cb; | ||
| if (typeof bounceEvents === 'object' && Object.keys(bounceEvents).length && !Array.isArray(bounceEvents) && bounceEvents.hasOwnProperty(name) && typeof bounceEvents[name] === 'function') { | ||
| cb = bounceEvents[name]; | ||
| }; | ||
| const setDummyAttribute = (attName, val) => { | ||
| if (attName !== 'hidden' && attName !== 'class' && attName !== 'id' && attName !== 'style' && !excludeAttribute.includes(attName)) { | ||
| // skip settings 'hidden' | 'class' | 'id' | excluded attribute list | ||
| this.el.setAttribute(attName, val); | ||
| } | ||
| cb = cb || typeof bounceEvents === 'function' ? bounceEvents : (e) => { | ||
| if (!e.bubbles) { | ||
| this.host.dispatchEvent(new Event(e.type, { | ||
| bubbles: true | ||
| })); | ||
| } | ||
| }; | ||
| this.el.addEventListener(name, cb); | ||
| } | ||
| } | ||
| }; | ||
| const setDummyAttribute = (attName, val) => { | ||
| if (attName !== 'hidden' && attName !== 'class' && attName !== 'id' && attName !== 'style' && !excludeAttribute.includes(attName)) { | ||
| // skip settings 'hidden' | 'class' | 'id' | excluded attribute list | ||
| this.el.setAttribute(attName, val); | ||
| } | ||
| if (mirrorStyle) { | ||
| const mirrorStyleBypass = []; | ||
| // mirror styling | ||
| if (attName === 'style' && mirrorStyle === true) { | ||
| let styleProps = val.split(';'); | ||
| for (let s of styleProps) { | ||
| if (!s) { | ||
| continue; | ||
| } | ||
| let keyVal = s.split(':'); | ||
| let val = keyVal[1].split('!'); | ||
| if (!excludeStyle.includes(keyVal[0]) && (() => { | ||
| // exclude related styles ex) border-xxxx | ||
| for (let e of excludeStyle) { | ||
| if (e.includes(keyVal[0] + '-')) { | ||
| return false; | ||
| } | ||
| if (mirrorStyle) { | ||
| const mirrorStyleBypass = []; | ||
| // mirror styling | ||
| if (attName === 'style' && mirrorStyle === true) { | ||
| let styleProps = val.split(';'); | ||
| for (let s of styleProps) { | ||
| if (!s) { | ||
| continue; | ||
| } | ||
| let keyVal = s.split(':'); | ||
| let val = keyVal[1].split('!'); | ||
| if (!excludeStyle.includes(keyVal[0]) && (() => { | ||
| // exclude related styles ex) border-xxxx | ||
| for (let e of excludeStyle) { | ||
| if (e.includes(keyVal[0] + '-')) { | ||
| return false; | ||
| } | ||
| } | ||
| return true; | ||
| })() && CSS.supports(keyVal[0], val[0])) { | ||
| this.el.style.setProperty(keyVal[0], val[0], val[1] || null); | ||
| if (Array.isArray(mirrorStyle) && mirrorStyle.includes(keyVal[0])) { | ||
| // add to style copy bypass list | ||
| mirrorStyleBypass.push(keyVal[0]); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return true; | ||
| })() && CSS.supports(keyVal[0], val[0])) { | ||
| this.el.style.setProperty(keyVal[0], val[0], val[1] || null); | ||
| if (Array.isArray(mirrorStyle) && mirrorStyle.includes(keyVal[0])) { | ||
| // add to style copy bypass list | ||
| mirrorStyleBypass.push(keyVal[0]); | ||
| let hostStyle = getComputedStyle(this.host); | ||
| if (typeof mirrorStyle === 'function') { | ||
| // callback | ||
| return mirrorStyle(hostStyle); | ||
| } | ||
| } | ||
| // copy css styles | ||
| for (let s of mirrorStyle) { | ||
| if (!mirrorStyleBypass.includes(s)) { | ||
| if (!excludeStyle.includes(s) && (() => { | ||
| // exclude related styles ex) border-xxxx | ||
| for (let e of excludeStyle) { | ||
| if (e.includes(s + '-')) { | ||
| return false; | ||
| } | ||
| } | ||
| return true; | ||
| })() && CSS.supports(s, hostStyle[s])) { | ||
| this.el.style.setProperty(s, hostStyle[s]); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| let hostStyle = getComputedStyle(this.host); | ||
| if (typeof mirrorStyle === 'function') { | ||
| // callback | ||
| return mirrorStyle(hostStyle); | ||
| } | ||
| // copy css styles | ||
| for (let s of mirrorStyle) { | ||
| if (!mirrorStyleBypass.includes(s)) { | ||
| if (!excludeStyle.includes(s) && (() => { | ||
| // exclude related styles ex) border-xxxx | ||
| for (let e of excludeStyle) { | ||
| if (e.includes(s + '-')) { | ||
| return false; | ||
| } | ||
| }; | ||
| const observe = () => { | ||
| this.observer = new MutationObserver((mutations) => { | ||
| let logger = (l) => { | ||
| if (!log) { | ||
| return; | ||
| } | ||
| if (typeof log === 'boolean') { | ||
| return console.log(l); | ||
| } | ||
| if (typeof log === 'function') { | ||
| return log(l); | ||
| } | ||
| }; | ||
| for (let m of mutations) { | ||
| let attributeName = m.attributeName; | ||
| if (!attributeName && trackNodes) { | ||
| if (typeof trackNodes === 'function') { | ||
| logger({ attributeName, mutationRecord: m }); | ||
| trackNodes(m); | ||
| } | ||
| continue; | ||
| } | ||
| let newValue = m.target.getAttribute(attributeName); | ||
| let oldValue = m.oldValue; | ||
| if (newValue === oldValue) { | ||
| // skip same values | ||
| continue; | ||
| } | ||
| logger({ attributeName, newValue, oldValue }); | ||
| // ! do not change the order of execution below ! | ||
| if (newValue === null) { | ||
| // attribute is removed | ||
| this.el.removeAttribute(attributeName); | ||
| continue; | ||
| } | ||
| setDummyAttribute(attributeName, newValue); | ||
| } | ||
| return true; | ||
| })() && CSS.supports(s, hostStyle[s])) { | ||
| this.el.style.setProperty(s, hostStyle[s]); | ||
| } | ||
| }); | ||
| this.observer.observe(this.host, { | ||
| attributes: true, | ||
| attributeOldValue: true, | ||
| childList: !!trackNodes | ||
| }); | ||
| }; | ||
| const init = (fullInit = false) => { | ||
| if (fullInit) { | ||
| initEvents(); | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| const observe = () => { | ||
| this.observer = new MutationObserver((mutations) => { | ||
| let logger = (l) => { | ||
| if (!log) { | ||
| return; | ||
| // attribute setup on load | ||
| const hostAttributes = getElementAttributes(this.host.attributes); | ||
| for (let attName in hostAttributes) { | ||
| if (attName.substring(0, 2) !== 'on') { | ||
| // skip onevent attributes | ||
| setDummyAttribute(attName, hostAttributes[attName]); | ||
| } | ||
| if (attName === 'id' && moveIdToSlotElement) { | ||
| // move id attribute to this.el if allowed | ||
| this.el.setAttribute(attName, hostAttributes[attName]); | ||
| this.host.removeAttribute(attName); | ||
| } | ||
| if (attName === 'autofocus') { | ||
| // auto focus on load | ||
| this.host.focus(); | ||
| } | ||
| } | ||
| if (typeof log === 'boolean') { | ||
| return console.log(l); | ||
| if (fullInit) { | ||
| observe(); | ||
| } | ||
| if (typeof log === 'function') { | ||
| return log(l); | ||
| } | ||
| }; | ||
| for (let m of mutations) { | ||
| let attributeName = m.attributeName; | ||
| if (!attributeName && trackNodes) { | ||
| if (typeof trackNodes === 'function') { | ||
| logger({ attributeName, mutationRecord: m }); | ||
| trackNodes(m); | ||
| } | ||
| continue; | ||
| } | ||
| let newValue = m.target.getAttribute(attributeName); | ||
| let oldValue = m.oldValue; | ||
| if (newValue === oldValue) { | ||
| // skip same values | ||
| continue; | ||
| } | ||
| logger({ attributeName, newValue, oldValue }); | ||
| // ! do not change the order of execution below ! | ||
| if (newValue === null) { | ||
| // attribute is removed | ||
| this.el.removeAttribute(attributeName); | ||
| continue; | ||
| } | ||
| setDummyAttribute(attributeName, newValue); | ||
| } | ||
| }); | ||
| this.observer.observe(this.host, { | ||
| attributes: true, | ||
| attributeOldValue: true, | ||
| childList: !!trackNodes | ||
| }); | ||
| }; | ||
| const init = (fullInit = false) => { | ||
| if (fullInit) { | ||
| initEvents(); | ||
| } | ||
| // attribute setup on load | ||
| const hostAttributes = getElementAttributes(this.host.attributes); | ||
| for (let attName in hostAttributes) { | ||
| if (attName.substring(0, 2) !== 'on') { | ||
| // skip onevent attributes | ||
| setDummyAttribute(attName, hostAttributes[attName]); | ||
| } | ||
| if (attName === 'id' && moveIdToSlotElement) { | ||
| // move id attribute to this.el if allowed | ||
| this.el.setAttribute(attName, hostAttributes[attName]); | ||
| this.host.removeAttribute(attName); | ||
| } | ||
| if (attName === 'autofocus') { | ||
| // auto focus on load | ||
| this.host.focus(); | ||
| } | ||
| } | ||
| if (fullInit) { | ||
| observe(); | ||
| } | ||
| }; | ||
| init(true); | ||
| return { init }; | ||
| }; | ||
| init(true); | ||
| return { init }; | ||
| } | ||
| const suiOverlayCss = ":host{display:none !important}"; | ||
| const SuiOverlayStyle0 = suiOverlayCss; | ||
| const SuiOverlay = class { | ||
| constructor(hostRef) { | ||
| index.registerInstance(this, hostRef); | ||
| this.overlayId = null; | ||
| this.position = 'center'; | ||
| this.transitionTime = '0.25s'; | ||
| } | ||
| componentWillLoad() { | ||
| const allowed_positions = [ | ||
| 'center', | ||
| 'right', | ||
| 'left', | ||
| 'right', | ||
| 'bottom', | ||
| 'top' | ||
| ]; | ||
| if (!allowed_positions.includes(this.position)) { | ||
| this.position = 'center'; | ||
| constructor(hostRef) { | ||
| index.registerInstance(this, hostRef); | ||
| this.overlayId = null; | ||
| this.position = 'center'; | ||
| this.transitionTime = '0.25s'; | ||
| } | ||
| } | ||
| createScreen() { | ||
| const css = { | ||
| base: { | ||
| 'z-index': '9999', | ||
| display: 'flex', | ||
| position: 'fixed', | ||
| 'flex-direction': 'column', | ||
| top: '0', | ||
| right: '0', | ||
| bottom: '0', | ||
| left: '0', | ||
| 'background-color': 'transparent', | ||
| 'overflow': 'hidden', | ||
| 'transition': `background-color ${this.transitionTime} ease-out` | ||
| }, | ||
| center: { | ||
| 'justify-content': 'center' | ||
| }, | ||
| top: { | ||
| 'justify-content': 'flex-start' | ||
| }, | ||
| bottom: { | ||
| 'justify-content': 'flex-end' | ||
| }, | ||
| right: { | ||
| 'justify-content': 'center', | ||
| 'align-items': 'flex-end' | ||
| }, | ||
| left: { | ||
| 'justify-content': 'center', | ||
| 'align-items': 'flex-start' | ||
| } | ||
| }; | ||
| const screen = document.createElement('div'); | ||
| for (let k in css.base) { | ||
| // append base css | ||
| screen.style.setProperty(k, css.base[k]); | ||
| componentWillLoad() { | ||
| const allowed_positions = [ | ||
| 'center', | ||
| 'right', | ||
| 'left', | ||
| 'right', | ||
| 'bottom', | ||
| 'top' | ||
| ]; | ||
| if (!allowed_positions.includes(this.position)) { | ||
| this.position = 'center'; | ||
| } | ||
| } | ||
| if (!css[this.position]) { | ||
| this.position = 'center'; | ||
| } | ||
| for (let k in css[this.position]) { | ||
| // append positioning css | ||
| screen.style.setProperty(k, css[this.position][k]); | ||
| } | ||
| cloneEvents(screen, { dispatchTo: this.host }); | ||
| // generate overlay id | ||
| this.overlayId = randomString(); | ||
| screen.id = this.overlayId; | ||
| return screen; | ||
| } | ||
| async close(cb = () => null) { | ||
| if (!this.overlayId) { | ||
| // no overlay to close | ||
| return; | ||
| } | ||
| const screen = document.getElementById(this.overlayId); | ||
| if (!screen) { | ||
| return; | ||
| } | ||
| const el = screen.firstChild; | ||
| let revert = { | ||
| bottom: { | ||
| 'bottom': 'calc(var(--overlay-height) * -1)' | ||
| }, | ||
| top: { | ||
| 'bottom': 'var(--overlay-height)' | ||
| }, | ||
| right: { | ||
| 'left': 'var(--overlay-width)' | ||
| }, | ||
| left: { | ||
| 'left': 'calc(var(--overlay-width) * -1)' | ||
| }, | ||
| center: { | ||
| 'opacity': '0' | ||
| } | ||
| }; | ||
| for (let k in revert[this.position]) { | ||
| el.style.setProperty(k, revert[this.position][k]); | ||
| } | ||
| screen.style.setProperty('background-color', 'transparent'); | ||
| let wait = 0; | ||
| if (this.transitionTime.includes('ms')) { | ||
| wait = Number(this.transitionTime.split(',')[0].replace('ms', '')); | ||
| } | ||
| else if (this.transitionTime.includes('s')) { | ||
| wait = parseFloat(this.transitionTime.split(',')[0].replace('s', '')) * 1000; | ||
| } | ||
| let removeEl = () => { | ||
| if (el.children.length) { | ||
| let len = el.children.length; | ||
| while (len--) { | ||
| this.host.prepend(el.children[len]); | ||
| createScreen() { | ||
| const css = { | ||
| base: { | ||
| 'z-index': '9999', | ||
| display: 'flex', | ||
| position: 'fixed', | ||
| 'flex-direction': 'column', | ||
| top: '0', | ||
| right: '0', | ||
| bottom: '0', | ||
| left: '0', | ||
| 'background-color': 'transparent', | ||
| 'overflow': 'hidden', | ||
| 'transition': `background-color ${this.transitionTime} ease-out` | ||
| }, | ||
| center: { | ||
| 'justify-content': 'center' | ||
| }, | ||
| top: { | ||
| 'justify-content': 'flex-start' | ||
| }, | ||
| bottom: { | ||
| 'justify-content': 'flex-end' | ||
| }, | ||
| right: { | ||
| 'justify-content': 'center', | ||
| 'align-items': 'flex-end' | ||
| }, | ||
| left: { | ||
| 'justify-content': 'center', | ||
| 'align-items': 'flex-start' | ||
| } | ||
| }; | ||
| const screen = document.createElement('div'); | ||
| for (let k in css.base) { | ||
| // append base css | ||
| screen.style.setProperty(k, css.base[k]); | ||
| } | ||
| } | ||
| }; | ||
| if (wait) { | ||
| setTimeout(() => { | ||
| removeEl(); | ||
| if (screen) { | ||
| screen.remove(); | ||
| if (!css[this.position]) { | ||
| this.position = 'center'; | ||
| } | ||
| cb(); | ||
| }, wait); | ||
| for (let k in css[this.position]) { | ||
| // append positioning css | ||
| screen.style.setProperty(k, css[this.position][k]); | ||
| } | ||
| cloneEvents(screen, { dispatchTo: this.host }); | ||
| // generate overlay id | ||
| this.overlayId = randomString(); | ||
| screen.id = this.overlayId; | ||
| return screen; | ||
| } | ||
| else { | ||
| // close popup | ||
| removeEl(); | ||
| if (screen) { | ||
| screen.remove(); | ||
| } | ||
| } | ||
| this.overlayId = null; | ||
| } | ||
| open(cb = () => null) { | ||
| return new Promise(res => { | ||
| if (this.overlayId) { | ||
| // overlay is already up | ||
| return; | ||
| } | ||
| // create overlay | ||
| const screen = this.createScreen(); | ||
| const el = document.createElement('div'); | ||
| if (this.host.children.length) { | ||
| let len = this.host.children.length; | ||
| while (len--) { | ||
| let child = this.host.children[len]; | ||
| el.prepend(child); | ||
| async close(cb = () => null) { | ||
| if (!this.overlayId) { | ||
| // no overlay to close | ||
| return; | ||
| } | ||
| } | ||
| for (let ev of eventList) { | ||
| el.addEventListener(ev, e => { | ||
| e.stopPropagation(); | ||
| }); | ||
| } | ||
| const css = { | ||
| base: { | ||
| // 'overflow-y': 'auto', | ||
| // 'overflow-x': 'auto', | ||
| 'opacity': '0', | ||
| 'display': 'block', | ||
| 'position': 'relative', | ||
| 'max-height': '100vh', | ||
| 'max-width': '100vw', | ||
| 'pointer-events': 'auto' | ||
| }, | ||
| bottom: { | ||
| 'border-bottom-left-radius': '0', | ||
| 'border-bottom-right-radius': '0', | ||
| 'bottom': 'calc(var(--overlay-height) * -1)', | ||
| 'margin': '0 auto', | ||
| 'transition': `bottom ${this.transitionTime} ease-out` | ||
| }, | ||
| top: { | ||
| 'border-top-left-radius': '0', | ||
| 'border-top-right-radius': '0', | ||
| 'bottom': 'var(--overlay-height)', | ||
| 'margin': '0 auto', | ||
| 'transition': `bottom ${this.transitionTime} ease-out` | ||
| }, | ||
| right: { | ||
| 'border-top-right-radius': '0', | ||
| 'border-bottom-right-radius': '0', | ||
| 'left': 'var(--overlay-width)', | ||
| 'margin': '0', | ||
| 'transition': `left ${this.transitionTime} ease-out` | ||
| }, | ||
| left: { | ||
| 'border-top-left-radius': '0', | ||
| 'border-bottom-left-radius': '0', | ||
| 'left': 'calc(var(--overlay-width) * -1)', | ||
| 'margin': '0', | ||
| 'transition': `left ${this.transitionTime} ease-out` | ||
| }, | ||
| center: { | ||
| 'margin': 'auto', | ||
| 'transition': `opacity ${this.transitionTime}` | ||
| const screen = document.getElementById(this.overlayId); | ||
| if (!screen) { | ||
| return; | ||
| } | ||
| }; | ||
| for (let k in css.base) { | ||
| el.style.setProperty(k, css.base[k]); | ||
| } | ||
| for (let k in css[this.position]) { | ||
| el.style.setProperty(k, css[this.position][k]); | ||
| } | ||
| screen.append(el); | ||
| document.body.append(screen); | ||
| el.style.setProperty('--overlay-width', window.getComputedStyle(el).width); | ||
| el.style.setProperty('--overlay-height', window.getComputedStyle(el).height); | ||
| el.style.setProperty('opacity', '1'); | ||
| window.requestAnimationFrame(() => { | ||
| const matchByPosition = { | ||
| 'center': 'center', | ||
| 'bottom': 'up', | ||
| 'top': 'down', | ||
| 'right': 'left', | ||
| 'left': 'right' | ||
| const el = screen.firstChild; | ||
| let revert = { | ||
| bottom: { | ||
| 'bottom': 'calc(var(--overlay-height) * -1)' | ||
| }, | ||
| top: { | ||
| 'bottom': 'var(--overlay-height)' | ||
| }, | ||
| right: { | ||
| 'left': 'var(--overlay-width)' | ||
| }, | ||
| left: { | ||
| 'left': 'calc(var(--overlay-width) * -1)' | ||
| }, | ||
| center: { | ||
| 'opacity': '0' | ||
| } | ||
| }; | ||
| let popDirection = matchByPosition[this.position]; | ||
| screen.style.setProperty('background-color', this.host.style.getPropertyValue('background-color')); | ||
| screen.style.setProperty('color', this.host.style.getPropertyValue('color')); | ||
| if (popDirection === 'up' || popDirection === 'down') { | ||
| el.style.setProperty('bottom', '0'); | ||
| for (let k in revert[this.position]) { | ||
| el.style.setProperty(k, revert[this.position][k]); | ||
| } | ||
| else if (popDirection === 'left' || popDirection === 'right') { | ||
| el.style.setProperty('left', '0'); | ||
| screen.style.setProperty('background-color', 'transparent'); | ||
| let wait = 0; | ||
| if (this.transitionTime.includes('ms')) { | ||
| wait = Number(this.transitionTime.split(',')[0].replace('ms', '')); | ||
| } | ||
| res(cb()); | ||
| }); | ||
| }); | ||
| } | ||
| disconnectedCallback() { | ||
| this.close(); | ||
| } | ||
| render() { | ||
| return (index.h(index.Host, { hidden: true, style: { display: this.overlayId ? null : 'none' } }, index.h("slot", null))); | ||
| } | ||
| get host() { return index.getElement(this); } | ||
| else if (this.transitionTime.includes('s')) { | ||
| wait = parseFloat(this.transitionTime.split(',')[0].replace('s', '')) * 1000; | ||
| } | ||
| let removeEl = () => { | ||
| if (el.children.length) { | ||
| let len = el.children.length; | ||
| while (len--) { | ||
| this.host.prepend(el.children[len]); | ||
| } | ||
| } | ||
| }; | ||
| if (wait) { | ||
| setTimeout(() => { | ||
| removeEl(); | ||
| if (screen) { | ||
| screen.remove(); | ||
| } | ||
| cb(); | ||
| }, wait); | ||
| } | ||
| else { | ||
| // close popup | ||
| removeEl(); | ||
| if (screen) { | ||
| screen.remove(); | ||
| } | ||
| } | ||
| this.overlayId = null; | ||
| } | ||
| open(cb = () => null) { | ||
| return new Promise(res => { | ||
| if (this.overlayId) { | ||
| // overlay is already up | ||
| return; | ||
| } | ||
| // create overlay | ||
| const screen = this.createScreen(); | ||
| const el = document.createElement('div'); | ||
| if (this.host.children.length) { | ||
| let len = this.host.children.length; | ||
| while (len--) { | ||
| let child = this.host.children[len]; | ||
| el.prepend(child); | ||
| } | ||
| } | ||
| for (let ev of eventList) { | ||
| el.addEventListener(ev, e => { | ||
| e.stopPropagation(); | ||
| }); | ||
| } | ||
| const css = { | ||
| base: { | ||
| // 'overflow-y': 'auto', | ||
| // 'overflow-x': 'auto', | ||
| 'opacity': '0', | ||
| 'display': 'block', | ||
| 'position': 'relative', | ||
| 'max-height': '100vh', | ||
| 'max-width': '100vw', | ||
| 'pointer-events': 'auto' | ||
| }, | ||
| bottom: { | ||
| 'border-bottom-left-radius': '0', | ||
| 'border-bottom-right-radius': '0', | ||
| 'bottom': 'calc(var(--overlay-height) * -1)', | ||
| 'margin': '0 auto', | ||
| 'transition': `bottom ${this.transitionTime} ease-out` | ||
| }, | ||
| top: { | ||
| 'border-top-left-radius': '0', | ||
| 'border-top-right-radius': '0', | ||
| 'bottom': 'var(--overlay-height)', | ||
| 'margin': '0 auto', | ||
| 'transition': `bottom ${this.transitionTime} ease-out` | ||
| }, | ||
| right: { | ||
| 'border-top-right-radius': '0', | ||
| 'border-bottom-right-radius': '0', | ||
| 'left': 'var(--overlay-width)', | ||
| 'margin': '0', | ||
| 'transition': `left ${this.transitionTime} ease-out` | ||
| }, | ||
| left: { | ||
| 'border-top-left-radius': '0', | ||
| 'border-bottom-left-radius': '0', | ||
| 'left': 'calc(var(--overlay-width) * -1)', | ||
| 'margin': '0', | ||
| 'transition': `left ${this.transitionTime} ease-out` | ||
| }, | ||
| center: { | ||
| 'margin': 'auto', | ||
| 'transition': `opacity ${this.transitionTime}` | ||
| } | ||
| }; | ||
| for (let k in css.base) { | ||
| el.style.setProperty(k, css.base[k]); | ||
| } | ||
| for (let k in css[this.position]) { | ||
| el.style.setProperty(k, css[this.position][k]); | ||
| } | ||
| screen.append(el); | ||
| document.body.append(screen); | ||
| el.style.setProperty('--overlay-width', window.getComputedStyle(el).width); | ||
| el.style.setProperty('--overlay-height', window.getComputedStyle(el).height); | ||
| el.style.setProperty('opacity', '1'); | ||
| window.requestAnimationFrame(() => { | ||
| const matchByPosition = { | ||
| 'center': 'center', | ||
| 'bottom': 'up', | ||
| 'top': 'down', | ||
| 'right': 'left', | ||
| 'left': 'right' | ||
| }; | ||
| let popDirection = matchByPosition[this.position]; | ||
| screen.style.setProperty('background-color', this.host.style.getPropertyValue('background-color')); | ||
| screen.style.setProperty('color', this.host.style.getPropertyValue('color')); | ||
| if (popDirection === 'up' || popDirection === 'down') { | ||
| el.style.setProperty('bottom', '0'); | ||
| } | ||
| else if (popDirection === 'left' || popDirection === 'right') { | ||
| el.style.setProperty('left', '0'); | ||
| } | ||
| res(cb()); | ||
| }); | ||
| }); | ||
| } | ||
| disconnectedCallback() { | ||
| this.close(); | ||
| } | ||
| render() { | ||
| return (index.h(index.Host, { key: '27d73bd29473f8dd2ded1484f5dbcb4618b01743', hidden: true, style: { display: this.overlayId ? null : 'none' } }, index.h("slot", { key: '5d209b869b76d1f48b05018ceed622b217eed036' }))); | ||
| } | ||
| get host() { return index.getElement(this); } | ||
| }; | ||
| SuiOverlay.style = suiOverlayCss; | ||
| SuiOverlay.style = SuiOverlayStyle0; | ||
| const suiTextareaCss = ":host{height:auto;display:inline-block;vertical-align:top;position:relative;max-width:100%;padding:0.6em 0.66em;min-width:1em;width:12em;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.5);overflow-y:auto;white-space:pre-wrap;word-break:break-word;line-height:1.33}.shell{display:grid;position:relative;width:100%;height:100%}.shell>.text-value{display:block;width:100%;min-height:1em;white-space:inherit;word-break:inherit;font-size:inherit;line-height:inherit;font-family:inherit;font-weight:inherit}.shell>.text-value>div{display:none}.shell>.text-value::before{content:attr(text-value);display:block;white-space:inherit;word-break:inherit;color:inherit}::slotted([slot]){position:absolute;resize:none;overflow:hidden;border:none;outline:none;background-color:transparent;color:inherit;display:block;inset:0;padding:0;margin:0;width:100%;min-height:1em;grid-area:1/1/2/2;height:100%}:host(:focus-within){box-shadow:inset 0 0 0 1px rgba(0,0,0,0.5), 0 0 0 1px currentColor}:host([disabled]){box-shadow:none;background-color:hsla(0deg, 0%, 50%, 0.33);filter:grayscale(1)}"; | ||
| const SuiTextareaStyle0 = suiTextareaCss; | ||
| const SuiTextarea = class { | ||
| constructor(hostRef) { | ||
| index.registerInstance(this, hostRef); | ||
| this.slotName = randomString(); | ||
| this.value = ''; | ||
| this.disabled = undefined; | ||
| this.textValue = ''; | ||
| this.el = (() => { | ||
| let value = this.value ? this.value.toString() : ''; | ||
| // create new element | ||
| const textarea = document.createElement('textarea'); | ||
| if (value) { | ||
| textarea.value = value; | ||
| } | ||
| textarea.setAttribute('slot', this.slotName); | ||
| textarea.addEventListener('input', e => { | ||
| this.value = e.target.value; | ||
| }); | ||
| for (let key of [ | ||
| 'font-size', | ||
| 'line-height', | ||
| 'font-family', | ||
| 'font-weight', | ||
| 'white-space', | ||
| 'word-break' | ||
| ]) { | ||
| textarea.style.setProperty(key, 'inherit', 'important'); | ||
| } | ||
| textarea.style.setProperty('height', '100%', 'important'); | ||
| textarea.style.setProperty('box-sizing', 'content-box', 'important'); | ||
| this.host.prepend(textarea); | ||
| return textarea; | ||
| })(); | ||
| } | ||
| valueHandler(n, o) { | ||
| if (n !== o && this.el) { | ||
| let val = n === null && n === undefined ? '' : n.toString(); | ||
| this.el.value = val; | ||
| this.textValue = val; | ||
| constructor(hostRef) { | ||
| index.registerInstance(this, hostRef); | ||
| this.slotName = randomString(); | ||
| this.value = ''; | ||
| this.disabled = undefined; | ||
| this.textValue = ''; | ||
| this.el = (() => { | ||
| let value = this.value ? this.value.toString() : ''; | ||
| // create new element | ||
| const textarea = document.createElement('textarea'); | ||
| if (value) { | ||
| textarea.value = value; | ||
| } | ||
| textarea.setAttribute('slot', this.slotName); | ||
| textarea.addEventListener('input', e => { | ||
| this.value = e.target.value; | ||
| }); | ||
| for (let key of [ | ||
| 'font-size', | ||
| 'line-height', | ||
| 'font-family', | ||
| 'font-weight', | ||
| 'white-space', | ||
| 'word-break' | ||
| ]) { | ||
| textarea.style.setProperty(key, 'inherit', 'important'); | ||
| } | ||
| textarea.style.setProperty('height', '100%', 'important'); | ||
| textarea.style.setProperty('box-sizing', 'content-box', 'important'); | ||
| this.host.prepend(textarea); | ||
| return textarea; | ||
| })(); | ||
| } | ||
| } | ||
| componentDidRender() { | ||
| if (this.el && this.el.parentElement === null) { | ||
| this.host.prepend(this.el); | ||
| valueHandler(n, o) { | ||
| if (n !== o && this.el) { | ||
| let val = n === null && n === undefined ? '' : n.toString(); | ||
| this.el.value = val; | ||
| this.textValue = val; | ||
| } | ||
| } | ||
| } | ||
| componentWillLoad() { | ||
| let value = this.value !== null && this.value !== undefined ? this.value.toString() : ''; | ||
| if (!value) { | ||
| let nestedValue = this.host.childNodes; | ||
| for (let idx = 0; idx < nestedValue.length; idx++) { | ||
| let el = nestedValue[idx]; | ||
| if (el.nodeType === Node.TEXT_NODE) { | ||
| this.value += el.textContent; | ||
| componentDidRender() { | ||
| if (this.el && this.el.parentElement === null) { | ||
| this.host.prepend(this.el); | ||
| } | ||
| } | ||
| } | ||
| this.textValue = this.value; | ||
| dummyHandler.bind(this)({ | ||
| excludeAttribute: ['value', 'rows', 'cols'], | ||
| moveIdToSlotElement: true, | ||
| excludeStyle: ['border', 'margin', 'padding', 'max', 'min', 'width', 'height'], | ||
| mirrorStyle: (hostCss) => { | ||
| this.el.style.setProperty('border-radius', hostCss['border-radius'], 'important'); | ||
| // make text input fill the host | ||
| let padding = [ | ||
| hostCss['padding-top'], | ||
| hostCss['padding-right'], | ||
| hostCss['padding-bottom'], | ||
| hostCss['padding-left'] | ||
| ]; | ||
| this.el.style.setProperty('padding', hostCss['padding'], 'important'); | ||
| this.el.style.setProperty('margin', padding.map(p => { | ||
| return `-${p}`; | ||
| }).join(' '), 'important'); | ||
| this.el.style.setProperty('min-height', `calc(${hostCss['min-height']} - ${padding[0]} - ${padding[2]})`, 'important'); | ||
| } | ||
| }); | ||
| // dispatch mounted event when finished loading | ||
| this.host.dispatchEvent(new CustomEvent('mounted')); | ||
| } | ||
| render() { | ||
| return (index.h(index.Host, { disabled: this.disabled }, index.h("div", { class: 'shell' }, index.h("slot", { name: this.slotName, onSlotchange: () => this.componentDidRender() }), index.h("div", { class: 'text-value', "text-value": this.textValue + ' ' }, index.h("div", null, index.h("slot", null)))))); | ||
| } | ||
| get host() { return index.getElement(this); } | ||
| static get watchers() { return { | ||
| "value": ["valueHandler"] | ||
| }; } | ||
| componentWillLoad() { | ||
| let value = this.value !== null && this.value !== undefined ? this.value.toString() : ''; | ||
| if (!value) { | ||
| let nestedValue = this.host.childNodes; | ||
| for (let idx = 0; idx < nestedValue.length; idx++) { | ||
| let el = nestedValue[idx]; | ||
| if (el.nodeType === Node.TEXT_NODE) { | ||
| this.value += el.textContent; | ||
| } | ||
| } | ||
| } | ||
| this.textValue = this.value; | ||
| dummyHandler.bind(this)({ | ||
| excludeAttribute: ['value', 'rows', 'cols'], | ||
| moveIdToSlotElement: true, | ||
| excludeStyle: ['border', 'margin', 'padding', 'max', 'min', 'width', 'height'], | ||
| mirrorStyle: (hostCss) => { | ||
| this.el.style.setProperty('border-radius', hostCss['border-radius'], 'important'); | ||
| // make text input fill the host | ||
| let padding = [ | ||
| hostCss['padding-top'], | ||
| hostCss['padding-right'], | ||
| hostCss['padding-bottom'], | ||
| hostCss['padding-left'] | ||
| ]; | ||
| this.el.style.setProperty('padding', hostCss['padding'], 'important'); | ||
| this.el.style.setProperty('margin', padding.map(p => { | ||
| return `-${p}`; | ||
| }).join(' '), 'important'); | ||
| this.el.style.setProperty('min-height', `calc(${hostCss['min-height']} - ${padding[0]} - ${padding[2]})`, 'important'); | ||
| } | ||
| }); | ||
| // dispatch mounted event when finished loading | ||
| this.host.dispatchEvent(new CustomEvent('mounted')); | ||
| } | ||
| render() { | ||
| return (index.h(index.Host, { key: 'fd0cc5b66029f1dcdbc8eca362e39e62b3d5eb15', disabled: this.disabled }, index.h("div", { key: '40dc43ff0ec20da55fc095b7c041ab6d481488ce', class: 'shell' }, index.h("slot", { key: '59cab79f0635cef39c8e173b75a61360e4aa71a4', name: this.slotName, onSlotchange: () => this.componentDidRender() }), index.h("div", { key: 'd4b9e3d48789479f2f0bae09b7491c17b4f5a94d', class: 'text-value', "text-value": this.textValue + ' ' }, index.h("div", { key: '2632330ecb0ea4cea570e4a2fc98249194fa2fe9' }, index.h("slot", { key: '1e99d5edb2e777d1451976ed617bd34b6fc0e632' })))))); | ||
| } | ||
| get host() { return index.getElement(this); } | ||
| static get watchers() { return { | ||
| "value": ["valueHandler"] | ||
| }; } | ||
| }; | ||
| SuiTextarea.style = suiTextareaCss; | ||
| SuiTextarea.style = SuiTextareaStyle0; | ||
| const suiTooltipCss = ":host{display:inline-block}:host>.sui-tooltip{display:block;position:relative !important}:host>.sui-tooltip>.sui-tool{text-align:inherit}:host>.sui-tooltip .sui-tip{min-width:100%;display:none;position:absolute;max-width:var(--tip-max-width);box-sizing:border-box;bottom:calc(100% + .66em);top:unset;left:0;right:unset}:host>.sui-tooltip.bottom .sui-tip{top:calc(100% + .66em);bottom:unset}:host>.sui-tooltip.left .sui-tip{left:unset;right:0}:host>.sui-tooltip:hover .sui-tip{display:block}:host>.sui-tooltip:hover .tip-arrow{display:block}.tip-arrow{display:none;position:absolute;width:0;height:0;left:50%;transform:translateX(-50%)}.tip-arrow.bottom{z-index:1;top:calc(100% + 2px);bottom:unset;border:0.5em solid transparent;border-top-width:0;border-bottom-width:.66em;border-bottom-color:var(--tip-background-color)}.tip-arrow.top{top:unset;bottom:calc(100% + 2px);border:0.5em solid transparent;border-bottom-width:0;border-top-width:.66em;border-top-color:var(--tip-background-color)}::slotted([slot='tip']){white-space:pre;overflow:hidden}"; | ||
| const suiTooltipCss = ":host{display:inline-block}:host>.sui-tooltip{display:block;position:relative !important}:host>.sui-tooltip>.sui-tool{text-align:inherit}:host>.sui-tooltip .sui-tip{min-width:100%;display:none;position:absolute;box-sizing:border-box;bottom:calc(100% + 8px);top:unset;left:0;right:unset}:host>.sui-tooltip.bottom .sui-tip{top:calc(100% + 8px);bottom:unset}:host>.sui-tooltip.left .sui-tip{left:unset;right:0}:host>.sui-tooltip:hover .sui-tip{display:block}:host>.sui-tooltip:hover .tip-arrow{display:block}.tip-arrow{display:none;position:absolute;width:0;height:0;left:50%;transform:translateX(-50%)}.tip-arrow.bottom{z-index:1;top:calc(100% + 4px);bottom:unset;border:4px solid transparent;border-top-width:0;border-bottom-width:4px;border-bottom-color:var(--tip-background-color)}.tip-arrow.top{top:unset;bottom:calc(100% + 4px);border:4px solid transparent;border-bottom-width:0;border-top-width:4px;border-top-color:var(--tip-background-color)}::slotted([slot='tip']){white-space:pre;overflow:hidden}"; | ||
| const SuiTooltipStyle0 = suiTooltipCss; | ||
| const SuiTooltip = class { | ||
| constructor(hostRef) { | ||
| index.registerInstance(this, hostRef); | ||
| this.maxWidth = '100vw'; | ||
| this.classNames = ''; | ||
| this.tipBackgroundColor = 'transparent'; | ||
| } | ||
| setPosition(e) { | ||
| let y = window.innerHeight / 2; | ||
| let x = window.innerWidth / 2; | ||
| let isBottom = e.clientY < y; | ||
| let isLeft = e.clientX > x; | ||
| this.classNames = ''; | ||
| if (isBottom) { | ||
| this.classNames += ' bottom'; | ||
| constructor(hostRef) { | ||
| index.registerInstance(this, hostRef); | ||
| this.classNames = ''; | ||
| this.tipBackgroundColor = 'transparent'; | ||
| } | ||
| else { | ||
| this.classNames += ' top'; | ||
| setPosition(e) { | ||
| let y = window.innerHeight / 2; | ||
| let x = window.innerWidth / 2; | ||
| let isBottom = e.clientY < y; | ||
| let isLeft = e.clientX > x; | ||
| this.classNames = ''; | ||
| if (isBottom) { | ||
| this.classNames += ' bottom'; | ||
| } | ||
| else { | ||
| this.classNames += ' top'; | ||
| } | ||
| if (isLeft) { | ||
| this.classNames += ' left'; | ||
| } | ||
| else { | ||
| this.classNames += ' right'; | ||
| } | ||
| let tip = this.host.querySelectorAll('[slot="tip"]'); | ||
| this.tipBackgroundColor = window.getComputedStyle(tip[0]).getPropertyValue('background-color'); | ||
| } | ||
| if (isLeft) { | ||
| this.classNames += ' left'; | ||
| this.maxWidth = `${e.clientX - 16}px`; | ||
| render() { | ||
| return (index.h(index.Host, { key: '55f111fc62de75215d1f4b5829aeead84f36e60f' }, index.h("div", { key: '8df70c5bfcc671e0e2477dae26139cd609ee01bf', class: 'sui-tooltip' + this.classNames }, index.h("div", { key: '6c834bdd0589a8533628a555beeb55d8a9a8ab79', class: 'sui-tool' }, index.h("slot", { key: '8b466243a3495d36b98961140a28515692879120', name: 'tool' }), index.h("div", { key: '677ddbc5bc057f2edae2183815e74ed67d55b4d9', class: 'sui-tip', style: { '--tip-background-color': this.tipBackgroundColor } }, index.h("slot", { key: '9fbb2cb45e605f3a0a2317485adc1b6c79731357', name: 'tip' })), index.h("div", { key: '50b4b3f3333e85acc1d67358a09559106d7bc560', class: 'tip-arrow' + this.classNames, style: { '--tip-background-color': this.tipBackgroundColor } }))))); | ||
| } | ||
| else { | ||
| this.classNames += ' right'; | ||
| this.maxWidth = `${window.innerWidth - e.clientX - 16}px`; | ||
| } | ||
| let tip = this.host.querySelectorAll('[slot="tip"]'); | ||
| this.tipBackgroundColor = window.getComputedStyle(tip[0]).getPropertyValue('background-color'); | ||
| } | ||
| render() { | ||
| return (index.h(index.Host, null, index.h("div", { class: 'sui-tooltip' + this.classNames }, index.h("div", { class: 'sui-tool' }, index.h("slot", { name: 'tool' }), index.h("div", { class: 'sui-tip', style: { '--tip-max-width': this.maxWidth, '--tip-background-color': this.tipBackgroundColor } }, index.h("slot", { name: 'tip' })), index.h("div", { class: 'tip-arrow' + this.classNames, style: { '--tip-background-color': this.tipBackgroundColor } }))))); | ||
| } | ||
| get host() { return index.getElement(this); } | ||
| get host() { return index.getElement(this); } | ||
| }; | ||
| SuiTooltip.style = suiTooltipCss; | ||
| SuiTooltip.style = SuiTooltipStyle0; | ||
@@ -969,1 +975,3 @@ exports.sui_flextext = SuiFlextext; | ||
| exports.sui_tooltip = SuiTooltip; | ||
| //# sourceMappingURL=sui-flextext_5.cjs.entry.js.map |
| { | ||
| "entries": [ | ||
| "./components/sui-flextext/sui-flextext.js", | ||
| "./components/sui-nav/sui-nav.js", | ||
| "./components/sui-overlay/sui-overlay.js", | ||
| "./components/sui-textarea/sui-textarea.js", | ||
| "./components/sui-tooltip/sui-tooltip.js" | ||
| "components/sui-flextext/sui-flextext.js", | ||
| "components/sui-nav/sui-nav.js", | ||
| "components/sui-overlay/sui-overlay.js", | ||
| "components/sui-textarea/sui-textarea.js", | ||
| "components/sui-tooltip/sui-tooltip.js" | ||
| ], | ||
| "compiler": { | ||
| "name": "@stencil/core", | ||
| "version": "2.22.3", | ||
| "typescriptVersion": "4.9.4" | ||
| "version": "4.19.2", | ||
| "typescriptVersion": "5.4.5" | ||
| }, | ||
@@ -14,0 +14,0 @@ "collections": [], |
@@ -1,125 +0,130 @@ | ||
| import { Host, h } from '@stencil/core'; | ||
| import { Host, h } from "@stencil/core"; | ||
| export class SuiFlextext { | ||
| constructor() { | ||
| this.fontSize = null; | ||
| this.adjustSize = () => { | ||
| const lineHeightRatio = Number(this.computedStyle.lineHeight.replace('px', '')) / this.fontSize; | ||
| if (!this.host.textContent) { | ||
| this.fontSize = this.maxSize; | ||
| } | ||
| else { | ||
| const scaleDown = () => { | ||
| let height = parseFloat(this.computedStyle.height); | ||
| let howmanylines = height / (this.fontSize * lineHeightRatio); | ||
| if (howmanylines > 1 && this.fontSize > this.minSize) { | ||
| let minus = this.fontSize - 1; | ||
| this.fontSize = minus > this.minSize ? minus : this.minSize; | ||
| this.host.style.setProperty('--auto-size', `${this.fontSize}px`); | ||
| if (this.fontSize === this.minSize) { | ||
| return; | ||
| constructor() { | ||
| this.fontSize = null; | ||
| this.adjustSize = () => { | ||
| let lineHeight = Number(this.computedStyle.lineHeight.replace('px', '')); | ||
| lineHeight = isNaN(lineHeight) ? this.fontSize : lineHeight; | ||
| let lineHeightRatio = lineHeight / this.fontSize; | ||
| lineHeightRatio = lineHeightRatio > 1 ? lineHeightRatio : 1; | ||
| if (!this.host.textContent) { | ||
| this.fontSize = this.maxSize; | ||
| } | ||
| scaleDown(); | ||
| } | ||
| }; | ||
| const scaleUp = () => { | ||
| let height = parseFloat(this.computedStyle.height); | ||
| let howmanylines = height / (this.fontSize * lineHeightRatio); | ||
| if (howmanylines <= 1 && this.fontSize < this.maxSize) { | ||
| let plus = this.fontSize + 1; | ||
| this.fontSize = plus < this.maxSize ? plus : this.maxSize; | ||
| this.host.style.setProperty('--auto-size', `${this.fontSize}px`); | ||
| if (this.fontSize === this.maxSize) { | ||
| return; | ||
| else { | ||
| const scaleDown = () => { | ||
| let height = parseFloat(this.computedStyle.height); | ||
| let howmanylines = height / (this.fontSize * lineHeightRatio); | ||
| if (howmanylines > 1 && this.fontSize > this.minSize) { | ||
| let minus = this.fontSize - 1; | ||
| this.fontSize = minus > this.minSize ? minus : this.minSize; | ||
| this.host.style.setProperty('--auto-size', `${this.fontSize}px`); | ||
| if (this.fontSize === this.minSize) { | ||
| return; | ||
| } | ||
| scaleDown(); | ||
| } | ||
| }; | ||
| const scaleUp = () => { | ||
| let height = parseFloat(this.computedStyle.height); | ||
| let howmanylines = height / (this.fontSize * lineHeightRatio); | ||
| if (howmanylines <= 1 && this.fontSize < this.maxSize) { | ||
| let plus = this.fontSize + 1; | ||
| this.fontSize = plus < this.maxSize ? plus : this.maxSize; | ||
| this.host.style.setProperty('--auto-size', `${this.fontSize}px`); | ||
| if (this.fontSize === this.maxSize) { | ||
| return; | ||
| } | ||
| scaleUp(); | ||
| } | ||
| else { | ||
| scaleDown(); | ||
| } | ||
| }; | ||
| scaleUp(); | ||
| } | ||
| scaleUp(); | ||
| } | ||
| }; | ||
| scaleUp(); | ||
| scaleDown(); | ||
| } | ||
| }; | ||
| this.minSize = 0; | ||
| this.maxSize = 72; | ||
| } | ||
| componentWillLoad() { | ||
| this.maxSize = this.maxSize && typeof this.maxSize !== 'number' ? Number(this.maxSize) : this.maxSize; | ||
| this.minSize = this.minSize && typeof this.minSize !== 'number' ? Number(this.minSize) : this.minSize; | ||
| if (isNaN(this.maxSize)) { | ||
| this.maxSize = 72; | ||
| this.minSize = 0; | ||
| this.maxSize = 72; | ||
| } | ||
| if (isNaN(this.minSize)) { | ||
| this.minSize = 0; | ||
| componentWillLoad() { | ||
| this.maxSize = this.maxSize && typeof this.maxSize !== 'number' ? Number(this.maxSize) : this.maxSize; | ||
| this.minSize = this.minSize && typeof this.minSize !== 'number' ? Number(this.minSize) : this.minSize; | ||
| this.maxSize = parseInt(this.maxSize); | ||
| this.minSize = parseInt(this.minSize); | ||
| if (isNaN(this.maxSize)) { | ||
| this.maxSize = 72; | ||
| } | ||
| if (isNaN(this.minSize)) { | ||
| this.minSize = this.fontSize; | ||
| } | ||
| this.computedStyle = window.getComputedStyle(this.host); | ||
| this.fontSize = Number(this.computedStyle.fontSize.replace('px', '')); | ||
| if (this.minSize > this.maxSize) { | ||
| this.maxSize = this.minSize; | ||
| } | ||
| } | ||
| this.computedStyle = window.getComputedStyle(this.host); | ||
| this.fontSize = Number(this.computedStyle.fontSize.replace('px', '')); | ||
| if (this.minSize === 0) { | ||
| this.minSize = this.fontSize; | ||
| componentDidLoad() { | ||
| this.adjustSize(); | ||
| window.addEventListener("resize", this.adjustSize.bind(this)); | ||
| } | ||
| if (this.minSize > this.maxSize) { | ||
| this.maxSize = this.minSize; | ||
| disconnectedCallback() { | ||
| window.removeEventListener('resize', this.adjustSize.bind(this)); | ||
| } | ||
| } | ||
| componentDidLoad() { | ||
| this.adjustSize(); | ||
| window.addEventListener("resize", this.adjustSize.bind(this)); | ||
| } | ||
| disconnectedCallback() { | ||
| window.removeEventListener('resize', this.adjustSize.bind(this)); | ||
| } | ||
| render() { | ||
| return (h(Host, null, h("slot", null))); | ||
| } | ||
| static get is() { return "sui-flextext"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get originalStyleUrls() { | ||
| return { | ||
| "$": ["sui-flextext.css"] | ||
| }; | ||
| } | ||
| static get styleUrls() { | ||
| return { | ||
| "$": ["sui-flextext.css"] | ||
| }; | ||
| } | ||
| static get properties() { | ||
| return { | ||
| "minSize": { | ||
| "type": "number", | ||
| "mutable": true, | ||
| "complexType": { | ||
| "original": "number", | ||
| "resolved": "number", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "" | ||
| }, | ||
| "attribute": "min-size", | ||
| "reflect": false, | ||
| "defaultValue": "0" | ||
| }, | ||
| "maxSize": { | ||
| "type": "number", | ||
| "mutable": true, | ||
| "complexType": { | ||
| "original": "number", | ||
| "resolved": "number", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "" | ||
| }, | ||
| "attribute": "max-size", | ||
| "reflect": false, | ||
| "defaultValue": "72" | ||
| } | ||
| }; | ||
| } | ||
| static get elementRef() { return "host"; } | ||
| render() { | ||
| return (h(Host, { key: 'a481ea1f996d1da4b4bf77b331dcdf9908d76373' }, h("slot", { key: '7fd70a27be055a44528e307c8af8e8d8e4b85db7' }))); | ||
| } | ||
| static get is() { return "sui-flextext"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get originalStyleUrls() { | ||
| return { | ||
| "$": ["sui-flextext.css"] | ||
| }; | ||
| } | ||
| static get styleUrls() { | ||
| return { | ||
| "$": ["sui-flextext.css"] | ||
| }; | ||
| } | ||
| static get properties() { | ||
| return { | ||
| "minSize": { | ||
| "type": "number", | ||
| "mutable": true, | ||
| "complexType": { | ||
| "original": "number", | ||
| "resolved": "number", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "" | ||
| }, | ||
| "attribute": "min-size", | ||
| "reflect": false, | ||
| "defaultValue": "0" | ||
| }, | ||
| "maxSize": { | ||
| "type": "number", | ||
| "mutable": true, | ||
| "complexType": { | ||
| "original": "number", | ||
| "resolved": "number", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "" | ||
| }, | ||
| "attribute": "max-size", | ||
| "reflect": false, | ||
| "defaultValue": "72" | ||
| } | ||
| }; | ||
| } | ||
| static get elementRef() { return "host"; } | ||
| } | ||
| //# sourceMappingURL=sui-flextext.js.map |
@@ -1,143 +0,144 @@ | ||
| import { Host, h } from '@stencil/core'; | ||
| import { Host, h } from "@stencil/core"; | ||
| export class SuiNav { | ||
| constructor() { | ||
| this.scrollOffset = 0; | ||
| this.topOffset = 0; | ||
| this.offsetProp = 'pageYOffset'; | ||
| // ! should be variable with bind ! | ||
| // this way we can remove the event when component is destroyed | ||
| this.calcNavbarPosition = (function () { | ||
| window.requestAnimationFrame(() => { | ||
| const navHeight = parseInt(this.navCss.height); | ||
| const scrollOffset = this.parent[this.offsetProp] < 0 ? 0 : this.parent[this.offsetProp]; // on mobile, offsetProp can be negative | ||
| const offsetDifference = (this.scrollOffset - scrollOffset) / this.autoHide; | ||
| const topOffset = (() => { | ||
| let topOffset = this.topOffset + offsetDifference; | ||
| if (topOffset < -navHeight) { | ||
| // if offset is beyond navHeight | ||
| return -navHeight; | ||
| } | ||
| if (topOffset > 0) { | ||
| // offset is positive | ||
| return 0; | ||
| } | ||
| return topOffset; // return int range | ||
| })(); | ||
| this.scrollOffset = scrollOffset; // update scroll offset | ||
| this.topOffset = topOffset; | ||
| this.host.style.setProperty('--nav-top', `${topOffset}px`); // apply css variable | ||
| }); | ||
| }).bind(this); | ||
| this.autoHide = undefined; | ||
| } | ||
| componentWillLoad() { | ||
| if (this.autoHide === undefined) { | ||
| // no given attribute | ||
| return; | ||
| constructor() { | ||
| this.scrollOffset = 0; | ||
| this.topOffset = 0; | ||
| this.offsetProp = 'pageYOffset'; | ||
| // ! should be variable with bind ! | ||
| // this way we can remove the event when component is destroyed | ||
| this.calcNavbarPosition = (function () { | ||
| window.requestAnimationFrame(() => { | ||
| const navHeight = parseInt(this.navCss.height); | ||
| const scrollOffset = this.parent[this.offsetProp] < 0 ? 0 : this.parent[this.offsetProp]; // on mobile, offsetProp can be negative | ||
| const offsetDifference = (this.scrollOffset - scrollOffset) / this.autoHide; | ||
| const topOffset = (() => { | ||
| let topOffset = this.topOffset + offsetDifference; | ||
| if (topOffset < -navHeight) { | ||
| // if offset is beyond navHeight | ||
| return -navHeight; | ||
| } | ||
| if (topOffset > 0) { | ||
| // offset is positive | ||
| return 0; | ||
| } | ||
| return topOffset; // return int range | ||
| })(); | ||
| this.scrollOffset = scrollOffset; // update scroll offset | ||
| this.topOffset = topOffset; | ||
| this.host.style.setProperty('--nav-top', `${topOffset}px`); // apply css variable | ||
| }); | ||
| }).bind(this); | ||
| this.autoHide = undefined; | ||
| } | ||
| if (!this.autoHide) { | ||
| // attribute exists but empty value. set to default. | ||
| this.autoHide = 3; | ||
| } | ||
| if (this.autoHide) { | ||
| if (typeof this.autoHide === 'string') { | ||
| // html attributes are string | ||
| try { | ||
| this.autoHide = JSON.parse(this.autoHide); | ||
| componentWillLoad() { | ||
| if (this.autoHide === undefined) { | ||
| // no given attribute | ||
| return; | ||
| } | ||
| catch (err) { | ||
| this.autoHide = 0; | ||
| if (!this.autoHide) { | ||
| // attribute exists but empty value. set to default. | ||
| this.autoHide = 3; | ||
| } | ||
| } | ||
| if (typeof this.autoHide === 'boolean') { | ||
| // if 'true' | 'false' is given. | ||
| this.autoHide = this.autoHide ? 3 : 0; | ||
| } | ||
| else if (typeof this.autoHide === 'number') { | ||
| if (this.autoHide < 0) { | ||
| // if value is less than 0 | ||
| this.autoHide = 0; | ||
| if (this.autoHide) { | ||
| if (typeof this.autoHide === 'string') { | ||
| // html attributes are string | ||
| try { | ||
| this.autoHide = JSON.parse(this.autoHide); | ||
| } | ||
| catch (err) { | ||
| this.autoHide = 0; | ||
| } | ||
| } | ||
| if (typeof this.autoHide === 'boolean') { | ||
| // if 'true' | 'false' is given. | ||
| this.autoHide = this.autoHide ? 3 : 0; | ||
| } | ||
| else if (typeof this.autoHide === 'number') { | ||
| if (this.autoHide < 0) { | ||
| // if value is less than 0 | ||
| this.autoHide = 0; | ||
| } | ||
| } | ||
| else { | ||
| // other types are not allowed | ||
| this.autoHide = 0; | ||
| } | ||
| } | ||
| } | ||
| else { | ||
| // other types are not allowed | ||
| this.autoHide = 0; | ||
| } | ||
| } | ||
| } | ||
| disconnectedCallback() { | ||
| // remove windows event | ||
| if (this.offsetProp === 'pageYOffset') { | ||
| document.removeEventListener('scroll', this.calcNavbarPosition); | ||
| } | ||
| else { | ||
| this.parent.removeEventListener('scroll', this.calcNavbarPosition); | ||
| } | ||
| } | ||
| componentDidLoad() { | ||
| this.navCss = window.getComputedStyle(this.host); | ||
| this.host.style.setProperty('--nav-position', 'sticky'); // apply css variable | ||
| if (this.autoHide) { | ||
| let seekScrollableParent = (el) => { | ||
| if (el) { | ||
| if (el.scrollHeight > el.clientHeight && 'hidden' !== window.getComputedStyle(el).overflowY) { | ||
| return el; | ||
| } | ||
| else { | ||
| return seekScrollableParent(el.parentElement); | ||
| } | ||
| disconnectedCallback() { | ||
| // remove windows event | ||
| if (this.offsetProp === 'pageYOffset') { | ||
| document.removeEventListener('scroll', this.calcNavbarPosition); | ||
| } | ||
| else { | ||
| return el; | ||
| this.parent.removeEventListener('scroll', this.calcNavbarPosition); | ||
| } | ||
| }; | ||
| let scrollableParent = seekScrollableParent(this.host.parentElement); | ||
| if (scrollableParent && scrollableParent.tagName.toLowerCase() !== 'html') { | ||
| this.offsetProp = 'scrollTop'; | ||
| this.parent = scrollableParent; | ||
| this.parent.addEventListener('scroll', this.calcNavbarPosition, { passive: true }); | ||
| } | ||
| else { | ||
| this.parent = window; | ||
| document.addEventListener('scroll', this.calcNavbarPosition, { passive: true }); | ||
| } | ||
| } | ||
| } | ||
| render() { | ||
| return (h(Host, null, h("slot", null))); | ||
| } | ||
| static get is() { return "sui-nav"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get originalStyleUrls() { | ||
| return { | ||
| "$": ["sui-nav.css"] | ||
| }; | ||
| } | ||
| static get styleUrls() { | ||
| return { | ||
| "$": ["sui-nav.css"] | ||
| }; | ||
| } | ||
| static get properties() { | ||
| return { | ||
| "autoHide": { | ||
| "type": "number", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "number", | ||
| "resolved": "number", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "" | ||
| }, | ||
| "attribute": "auto-hide", | ||
| "reflect": false | ||
| } | ||
| }; | ||
| } | ||
| static get elementRef() { return "host"; } | ||
| componentDidLoad() { | ||
| this.navCss = window.getComputedStyle(this.host); | ||
| this.host.style.setProperty('--nav-position', 'sticky'); // apply css variable | ||
| if (this.autoHide) { | ||
| let seekScrollableParent = (el) => { | ||
| if (el) { | ||
| if (el.scrollHeight > el.clientHeight && 'hidden' !== window.getComputedStyle(el).overflowY) { | ||
| return el; | ||
| } | ||
| else { | ||
| return seekScrollableParent(el.parentElement); | ||
| } | ||
| } | ||
| else { | ||
| return el; | ||
| } | ||
| }; | ||
| let scrollableParent = seekScrollableParent(this.host.parentElement); | ||
| if (scrollableParent && scrollableParent.tagName.toLowerCase() !== 'html') { | ||
| this.offsetProp = 'scrollTop'; | ||
| this.parent = scrollableParent; | ||
| this.parent.addEventListener('scroll', this.calcNavbarPosition, { passive: true }); | ||
| } | ||
| else { | ||
| this.parent = window; | ||
| document.addEventListener('scroll', this.calcNavbarPosition, { passive: true }); | ||
| } | ||
| } | ||
| } | ||
| render() { | ||
| return (h(Host, { key: '00e45c411ec831a66dd29d039568f57fc97b3930' }, h("slot", { key: '844be28b7e12419c0cf5dae28db5e3db313a4004' }))); | ||
| } | ||
| static get is() { return "sui-nav"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get originalStyleUrls() { | ||
| return { | ||
| "$": ["sui-nav.css"] | ||
| }; | ||
| } | ||
| static get styleUrls() { | ||
| return { | ||
| "$": ["sui-nav.css"] | ||
| }; | ||
| } | ||
| static get properties() { | ||
| return { | ||
| "autoHide": { | ||
| "type": "number", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "number", | ||
| "resolved": "number", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "" | ||
| }, | ||
| "attribute": "auto-hide", | ||
| "reflect": false | ||
| } | ||
| }; | ||
| } | ||
| static get elementRef() { return "host"; } | ||
| } | ||
| //# sourceMappingURL=sui-nav.js.map |
@@ -1,338 +0,344 @@ | ||
| import { Host, h } from '@stencil/core'; | ||
| import { cloneEvents, randomString, eventList } from '../../utils/utils'; | ||
| import { Host, h } from "@stencil/core"; | ||
| import { cloneEvents, randomString, eventList } from "../../utils/utils"; | ||
| export class SuiOverlay { | ||
| constructor() { | ||
| this.overlayId = null; | ||
| this.position = 'center'; | ||
| this.transitionTime = '0.25s'; | ||
| } | ||
| componentWillLoad() { | ||
| const allowed_positions = [ | ||
| 'center', | ||
| 'right', | ||
| 'left', | ||
| 'right', | ||
| 'bottom', | ||
| 'top' | ||
| ]; | ||
| if (!allowed_positions.includes(this.position)) { | ||
| this.position = 'center'; | ||
| constructor() { | ||
| this.overlayId = null; | ||
| this.position = 'center'; | ||
| this.transitionTime = '0.25s'; | ||
| } | ||
| } | ||
| createScreen() { | ||
| const css = { | ||
| base: { | ||
| 'z-index': '9999', | ||
| display: 'flex', | ||
| position: 'fixed', | ||
| 'flex-direction': 'column', | ||
| top: '0', | ||
| right: '0', | ||
| bottom: '0', | ||
| left: '0', | ||
| 'background-color': 'transparent', | ||
| 'overflow': 'hidden', | ||
| 'transition': `background-color ${this.transitionTime} ease-out` | ||
| }, | ||
| center: { | ||
| 'justify-content': 'center' | ||
| }, | ||
| top: { | ||
| 'justify-content': 'flex-start' | ||
| }, | ||
| bottom: { | ||
| 'justify-content': 'flex-end' | ||
| }, | ||
| right: { | ||
| 'justify-content': 'center', | ||
| 'align-items': 'flex-end' | ||
| }, | ||
| left: { | ||
| 'justify-content': 'center', | ||
| 'align-items': 'flex-start' | ||
| } | ||
| }; | ||
| const screen = document.createElement('div'); | ||
| for (let k in css.base) { | ||
| // append base css | ||
| screen.style.setProperty(k, css.base[k]); | ||
| componentWillLoad() { | ||
| const allowed_positions = [ | ||
| 'center', | ||
| 'right', | ||
| 'left', | ||
| 'right', | ||
| 'bottom', | ||
| 'top' | ||
| ]; | ||
| if (!allowed_positions.includes(this.position)) { | ||
| this.position = 'center'; | ||
| } | ||
| } | ||
| if (!css[this.position]) { | ||
| this.position = 'center'; | ||
| } | ||
| for (let k in css[this.position]) { | ||
| // append positioning css | ||
| screen.style.setProperty(k, css[this.position][k]); | ||
| } | ||
| cloneEvents(screen, { dispatchTo: this.host }); | ||
| // generate overlay id | ||
| this.overlayId = randomString(); | ||
| screen.id = this.overlayId; | ||
| return screen; | ||
| } | ||
| async close(cb = () => null) { | ||
| if (!this.overlayId) { | ||
| // no overlay to close | ||
| return; | ||
| } | ||
| const screen = document.getElementById(this.overlayId); | ||
| if (!screen) { | ||
| return; | ||
| } | ||
| const el = screen.firstChild; | ||
| let revert = { | ||
| bottom: { | ||
| 'bottom': 'calc(var(--overlay-height) * -1)' | ||
| }, | ||
| top: { | ||
| 'bottom': 'var(--overlay-height)' | ||
| }, | ||
| right: { | ||
| 'left': 'var(--overlay-width)' | ||
| }, | ||
| left: { | ||
| 'left': 'calc(var(--overlay-width) * -1)' | ||
| }, | ||
| center: { | ||
| 'opacity': '0' | ||
| } | ||
| }; | ||
| for (let k in revert[this.position]) { | ||
| el.style.setProperty(k, revert[this.position][k]); | ||
| } | ||
| screen.style.setProperty('background-color', 'transparent'); | ||
| let wait = 0; | ||
| if (this.transitionTime.includes('ms')) { | ||
| wait = Number(this.transitionTime.split(',')[0].replace('ms', '')); | ||
| } | ||
| else if (this.transitionTime.includes('s')) { | ||
| wait = parseFloat(this.transitionTime.split(',')[0].replace('s', '')) * 1000; | ||
| } | ||
| let removeEl = () => { | ||
| if (el.children.length) { | ||
| let len = el.children.length; | ||
| while (len--) { | ||
| this.host.prepend(el.children[len]); | ||
| createScreen() { | ||
| const css = { | ||
| base: { | ||
| 'z-index': '9999', | ||
| display: 'flex', | ||
| position: 'fixed', | ||
| 'flex-direction': 'column', | ||
| top: '0', | ||
| right: '0', | ||
| bottom: '0', | ||
| left: '0', | ||
| 'background-color': 'transparent', | ||
| 'overflow': 'hidden', | ||
| 'transition': `background-color ${this.transitionTime} ease-out` | ||
| }, | ||
| center: { | ||
| 'justify-content': 'center' | ||
| }, | ||
| top: { | ||
| 'justify-content': 'flex-start' | ||
| }, | ||
| bottom: { | ||
| 'justify-content': 'flex-end' | ||
| }, | ||
| right: { | ||
| 'justify-content': 'center', | ||
| 'align-items': 'flex-end' | ||
| }, | ||
| left: { | ||
| 'justify-content': 'center', | ||
| 'align-items': 'flex-start' | ||
| } | ||
| }; | ||
| const screen = document.createElement('div'); | ||
| for (let k in css.base) { | ||
| // append base css | ||
| screen.style.setProperty(k, css.base[k]); | ||
| } | ||
| } | ||
| }; | ||
| if (wait) { | ||
| setTimeout(() => { | ||
| removeEl(); | ||
| if (screen) { | ||
| screen.remove(); | ||
| if (!css[this.position]) { | ||
| this.position = 'center'; | ||
| } | ||
| cb(); | ||
| }, wait); | ||
| for (let k in css[this.position]) { | ||
| // append positioning css | ||
| screen.style.setProperty(k, css[this.position][k]); | ||
| } | ||
| cloneEvents(screen, { dispatchTo: this.host }); | ||
| // generate overlay id | ||
| this.overlayId = randomString(); | ||
| screen.id = this.overlayId; | ||
| return screen; | ||
| } | ||
| else { | ||
| // close popup | ||
| removeEl(); | ||
| if (screen) { | ||
| screen.remove(); | ||
| } | ||
| } | ||
| this.overlayId = null; | ||
| } | ||
| open(cb = () => null) { | ||
| return new Promise(res => { | ||
| if (this.overlayId) { | ||
| // overlay is already up | ||
| return; | ||
| } | ||
| // create overlay | ||
| const screen = this.createScreen(); | ||
| const el = document.createElement('div'); | ||
| if (this.host.children.length) { | ||
| let len = this.host.children.length; | ||
| while (len--) { | ||
| let child = this.host.children[len]; | ||
| el.prepend(child); | ||
| async close(cb = () => null) { | ||
| if (!this.overlayId) { | ||
| // no overlay to close | ||
| return; | ||
| } | ||
| } | ||
| for (let ev of eventList) { | ||
| el.addEventListener(ev, e => { | ||
| e.stopPropagation(); | ||
| }); | ||
| } | ||
| const css = { | ||
| base: { | ||
| // 'overflow-y': 'auto', | ||
| // 'overflow-x': 'auto', | ||
| 'opacity': '0', | ||
| 'display': 'block', | ||
| 'position': 'relative', | ||
| 'max-height': '100vh', | ||
| 'max-width': '100vw', | ||
| 'pointer-events': 'auto' | ||
| }, | ||
| bottom: { | ||
| 'border-bottom-left-radius': '0', | ||
| 'border-bottom-right-radius': '0', | ||
| 'bottom': 'calc(var(--overlay-height) * -1)', | ||
| 'margin': '0 auto', | ||
| 'transition': `bottom ${this.transitionTime} ease-out` | ||
| }, | ||
| top: { | ||
| 'border-top-left-radius': '0', | ||
| 'border-top-right-radius': '0', | ||
| 'bottom': 'var(--overlay-height)', | ||
| 'margin': '0 auto', | ||
| 'transition': `bottom ${this.transitionTime} ease-out` | ||
| }, | ||
| right: { | ||
| 'border-top-right-radius': '0', | ||
| 'border-bottom-right-radius': '0', | ||
| 'left': 'var(--overlay-width)', | ||
| 'margin': '0', | ||
| 'transition': `left ${this.transitionTime} ease-out` | ||
| }, | ||
| left: { | ||
| 'border-top-left-radius': '0', | ||
| 'border-bottom-left-radius': '0', | ||
| 'left': 'calc(var(--overlay-width) * -1)', | ||
| 'margin': '0', | ||
| 'transition': `left ${this.transitionTime} ease-out` | ||
| }, | ||
| center: { | ||
| 'margin': 'auto', | ||
| 'transition': `opacity ${this.transitionTime}` | ||
| const screen = document.getElementById(this.overlayId); | ||
| if (!screen) { | ||
| return; | ||
| } | ||
| }; | ||
| for (let k in css.base) { | ||
| el.style.setProperty(k, css.base[k]); | ||
| } | ||
| for (let k in css[this.position]) { | ||
| el.style.setProperty(k, css[this.position][k]); | ||
| } | ||
| screen.append(el); | ||
| document.body.append(screen); | ||
| el.style.setProperty('--overlay-width', window.getComputedStyle(el).width); | ||
| el.style.setProperty('--overlay-height', window.getComputedStyle(el).height); | ||
| el.style.setProperty('opacity', '1'); | ||
| window.requestAnimationFrame(() => { | ||
| const matchByPosition = { | ||
| 'center': 'center', | ||
| 'bottom': 'up', | ||
| 'top': 'down', | ||
| 'right': 'left', | ||
| 'left': 'right' | ||
| const el = screen.firstChild; | ||
| let revert = { | ||
| bottom: { | ||
| 'bottom': 'calc(var(--overlay-height) * -1)' | ||
| }, | ||
| top: { | ||
| 'bottom': 'var(--overlay-height)' | ||
| }, | ||
| right: { | ||
| 'left': 'var(--overlay-width)' | ||
| }, | ||
| left: { | ||
| 'left': 'calc(var(--overlay-width) * -1)' | ||
| }, | ||
| center: { | ||
| 'opacity': '0' | ||
| } | ||
| }; | ||
| let popDirection = matchByPosition[this.position]; | ||
| screen.style.setProperty('background-color', this.host.style.getPropertyValue('background-color')); | ||
| screen.style.setProperty('color', this.host.style.getPropertyValue('color')); | ||
| if (popDirection === 'up' || popDirection === 'down') { | ||
| el.style.setProperty('bottom', '0'); | ||
| for (let k in revert[this.position]) { | ||
| el.style.setProperty(k, revert[this.position][k]); | ||
| } | ||
| else if (popDirection === 'left' || popDirection === 'right') { | ||
| el.style.setProperty('left', '0'); | ||
| screen.style.setProperty('background-color', 'transparent'); | ||
| let wait = 0; | ||
| if (this.transitionTime.includes('ms')) { | ||
| wait = Number(this.transitionTime.split(',')[0].replace('ms', '')); | ||
| } | ||
| res(cb()); | ||
| }); | ||
| }); | ||
| } | ||
| disconnectedCallback() { | ||
| this.close(); | ||
| } | ||
| render() { | ||
| return (h(Host, { hidden: true, style: { display: this.overlayId ? null : 'none' } }, h("slot", null))); | ||
| } | ||
| static get is() { return "sui-overlay"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get originalStyleUrls() { | ||
| return { | ||
| "$": ["sui-overlay.css"] | ||
| }; | ||
| } | ||
| static get styleUrls() { | ||
| return { | ||
| "$": ["sui-overlay.css"] | ||
| }; | ||
| } | ||
| static get properties() { | ||
| return { | ||
| "position": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "" | ||
| }, | ||
| "attribute": "position", | ||
| "reflect": false, | ||
| "defaultValue": "'center'" | ||
| }, | ||
| "transitionTime": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "" | ||
| }, | ||
| "attribute": "transition-time", | ||
| "reflect": false, | ||
| "defaultValue": "'0.25s'" | ||
| } | ||
| }; | ||
| } | ||
| static get methods() { | ||
| return { | ||
| "close": { | ||
| "complexType": { | ||
| "signature": "(cb?: () => any) => Promise<void>", | ||
| "parameters": [{ | ||
| "tags": [], | ||
| "text": "" | ||
| }], | ||
| "references": { | ||
| "Promise": { | ||
| "location": "global" | ||
| }, | ||
| "HTMLElement": { | ||
| "location": "global" | ||
| else if (this.transitionTime.includes('s')) { | ||
| wait = parseFloat(this.transitionTime.split(',')[0].replace('s', '')) * 1000; | ||
| } | ||
| let removeEl = () => { | ||
| if (el.children.length) { | ||
| let len = el.children.length; | ||
| while (len--) { | ||
| this.host.prepend(el.children[len]); | ||
| } | ||
| } | ||
| }, | ||
| "return": "Promise<void>" | ||
| }, | ||
| "docs": { | ||
| "text": "", | ||
| "tags": [] | ||
| }; | ||
| if (wait) { | ||
| setTimeout(() => { | ||
| removeEl(); | ||
| if (screen) { | ||
| screen.remove(); | ||
| } | ||
| cb(); | ||
| }, wait); | ||
| } | ||
| }, | ||
| "open": { | ||
| "complexType": { | ||
| "signature": "(cb?: () => any) => Promise<unknown>", | ||
| "parameters": [{ | ||
| "tags": [], | ||
| "text": "" | ||
| }], | ||
| "references": { | ||
| "Promise": { | ||
| "location": "global" | ||
| else { | ||
| // close popup | ||
| removeEl(); | ||
| if (screen) { | ||
| screen.remove(); | ||
| } | ||
| }, | ||
| "return": "Promise<unknown>" | ||
| }, | ||
| "docs": { | ||
| "text": "", | ||
| "tags": [] | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| static get elementRef() { return "host"; } | ||
| this.overlayId = null; | ||
| } | ||
| open(cb = () => null) { | ||
| return new Promise(res => { | ||
| if (this.overlayId) { | ||
| // overlay is already up | ||
| return; | ||
| } | ||
| // create overlay | ||
| const screen = this.createScreen(); | ||
| const el = document.createElement('div'); | ||
| if (this.host.children.length) { | ||
| let len = this.host.children.length; | ||
| while (len--) { | ||
| let child = this.host.children[len]; | ||
| el.prepend(child); | ||
| } | ||
| } | ||
| for (let ev of eventList) { | ||
| el.addEventListener(ev, e => { | ||
| e.stopPropagation(); | ||
| }); | ||
| } | ||
| const css = { | ||
| base: { | ||
| // 'overflow-y': 'auto', | ||
| // 'overflow-x': 'auto', | ||
| 'opacity': '0', | ||
| 'display': 'block', | ||
| 'position': 'relative', | ||
| 'max-height': '100vh', | ||
| 'max-width': '100vw', | ||
| 'pointer-events': 'auto' | ||
| }, | ||
| bottom: { | ||
| 'border-bottom-left-radius': '0', | ||
| 'border-bottom-right-radius': '0', | ||
| 'bottom': 'calc(var(--overlay-height) * -1)', | ||
| 'margin': '0 auto', | ||
| 'transition': `bottom ${this.transitionTime} ease-out` | ||
| }, | ||
| top: { | ||
| 'border-top-left-radius': '0', | ||
| 'border-top-right-radius': '0', | ||
| 'bottom': 'var(--overlay-height)', | ||
| 'margin': '0 auto', | ||
| 'transition': `bottom ${this.transitionTime} ease-out` | ||
| }, | ||
| right: { | ||
| 'border-top-right-radius': '0', | ||
| 'border-bottom-right-radius': '0', | ||
| 'left': 'var(--overlay-width)', | ||
| 'margin': '0', | ||
| 'transition': `left ${this.transitionTime} ease-out` | ||
| }, | ||
| left: { | ||
| 'border-top-left-radius': '0', | ||
| 'border-bottom-left-radius': '0', | ||
| 'left': 'calc(var(--overlay-width) * -1)', | ||
| 'margin': '0', | ||
| 'transition': `left ${this.transitionTime} ease-out` | ||
| }, | ||
| center: { | ||
| 'margin': 'auto', | ||
| 'transition': `opacity ${this.transitionTime}` | ||
| } | ||
| }; | ||
| for (let k in css.base) { | ||
| el.style.setProperty(k, css.base[k]); | ||
| } | ||
| for (let k in css[this.position]) { | ||
| el.style.setProperty(k, css[this.position][k]); | ||
| } | ||
| screen.append(el); | ||
| document.body.append(screen); | ||
| el.style.setProperty('--overlay-width', window.getComputedStyle(el).width); | ||
| el.style.setProperty('--overlay-height', window.getComputedStyle(el).height); | ||
| el.style.setProperty('opacity', '1'); | ||
| window.requestAnimationFrame(() => { | ||
| const matchByPosition = { | ||
| 'center': 'center', | ||
| 'bottom': 'up', | ||
| 'top': 'down', | ||
| 'right': 'left', | ||
| 'left': 'right' | ||
| }; | ||
| let popDirection = matchByPosition[this.position]; | ||
| screen.style.setProperty('background-color', this.host.style.getPropertyValue('background-color')); | ||
| screen.style.setProperty('color', this.host.style.getPropertyValue('color')); | ||
| if (popDirection === 'up' || popDirection === 'down') { | ||
| el.style.setProperty('bottom', '0'); | ||
| } | ||
| else if (popDirection === 'left' || popDirection === 'right') { | ||
| el.style.setProperty('left', '0'); | ||
| } | ||
| res(cb()); | ||
| }); | ||
| }); | ||
| } | ||
| disconnectedCallback() { | ||
| this.close(); | ||
| } | ||
| render() { | ||
| return (h(Host, { key: '27d73bd29473f8dd2ded1484f5dbcb4618b01743', hidden: true, style: { display: this.overlayId ? null : 'none' } }, h("slot", { key: '5d209b869b76d1f48b05018ceed622b217eed036' }))); | ||
| } | ||
| static get is() { return "sui-overlay"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get originalStyleUrls() { | ||
| return { | ||
| "$": ["sui-overlay.css"] | ||
| }; | ||
| } | ||
| static get styleUrls() { | ||
| return { | ||
| "$": ["sui-overlay.css"] | ||
| }; | ||
| } | ||
| static get properties() { | ||
| return { | ||
| "position": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "" | ||
| }, | ||
| "attribute": "position", | ||
| "reflect": false, | ||
| "defaultValue": "'center'" | ||
| }, | ||
| "transitionTime": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "" | ||
| }, | ||
| "attribute": "transition-time", | ||
| "reflect": false, | ||
| "defaultValue": "'0.25s'" | ||
| } | ||
| }; | ||
| } | ||
| static get methods() { | ||
| return { | ||
| "close": { | ||
| "complexType": { | ||
| "signature": "(cb?: () => any) => Promise<void>", | ||
| "parameters": [{ | ||
| "name": "cb", | ||
| "type": "() => any", | ||
| "docs": "" | ||
| }], | ||
| "references": { | ||
| "Promise": { | ||
| "location": "global", | ||
| "id": "global::Promise" | ||
| }, | ||
| "HTMLElement": { | ||
| "location": "global", | ||
| "id": "global::HTMLElement" | ||
| } | ||
| }, | ||
| "return": "Promise<void>" | ||
| }, | ||
| "docs": { | ||
| "text": "", | ||
| "tags": [] | ||
| } | ||
| }, | ||
| "open": { | ||
| "complexType": { | ||
| "signature": "(cb?: () => any) => Promise<unknown>", | ||
| "parameters": [{ | ||
| "name": "cb", | ||
| "type": "() => any", | ||
| "docs": "" | ||
| }], | ||
| "references": { | ||
| "Promise": { | ||
| "location": "global", | ||
| "id": "global::Promise" | ||
| } | ||
| }, | ||
| "return": "Promise<unknown>" | ||
| }, | ||
| "docs": { | ||
| "text": "", | ||
| "tags": [] | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| static get elementRef() { return "host"; } | ||
| } | ||
| //# sourceMappingURL=sui-overlay.js.map |
@@ -1,169 +0,171 @@ | ||
| import { Host, h } from '@stencil/core'; | ||
| import { dummyHandler, randomString } from '../../utils/utils'; | ||
| import { Host, h } from "@stencil/core"; | ||
| import { dummyHandler, randomString } from "../../utils/utils"; | ||
| export class SuiTextarea { | ||
| constructor() { | ||
| this.slotName = randomString(); | ||
| this.value = ''; | ||
| this.disabled = undefined; | ||
| this.textValue = ''; | ||
| this.el = (() => { | ||
| let value = this.value ? this.value.toString() : ''; | ||
| // create new element | ||
| const textarea = document.createElement('textarea'); | ||
| if (value) { | ||
| textarea.value = value; | ||
| } | ||
| textarea.setAttribute('slot', this.slotName); | ||
| textarea.addEventListener('input', e => { | ||
| this.value = e.target.value; | ||
| }); | ||
| for (let key of [ | ||
| 'font-size', | ||
| 'line-height', | ||
| 'font-family', | ||
| 'font-weight', | ||
| 'white-space', | ||
| 'word-break' | ||
| ]) { | ||
| textarea.style.setProperty(key, 'inherit', 'important'); | ||
| } | ||
| textarea.style.setProperty('height', '100%', 'important'); | ||
| textarea.style.setProperty('box-sizing', 'content-box', 'important'); | ||
| this.host.prepend(textarea); | ||
| return textarea; | ||
| })(); | ||
| } | ||
| valueHandler(n, o) { | ||
| if (n !== o && this.el) { | ||
| let val = n === null && n === undefined ? '' : n.toString(); | ||
| this.el.value = val; | ||
| this.textValue = val; | ||
| constructor() { | ||
| this.slotName = randomString(); | ||
| this.value = ''; | ||
| this.disabled = undefined; | ||
| this.textValue = ''; | ||
| this.el = (() => { | ||
| let value = this.value ? this.value.toString() : ''; | ||
| // create new element | ||
| const textarea = document.createElement('textarea'); | ||
| if (value) { | ||
| textarea.value = value; | ||
| } | ||
| textarea.setAttribute('slot', this.slotName); | ||
| textarea.addEventListener('input', e => { | ||
| this.value = e.target.value; | ||
| }); | ||
| for (let key of [ | ||
| 'font-size', | ||
| 'line-height', | ||
| 'font-family', | ||
| 'font-weight', | ||
| 'white-space', | ||
| 'word-break' | ||
| ]) { | ||
| textarea.style.setProperty(key, 'inherit', 'important'); | ||
| } | ||
| textarea.style.setProperty('height', '100%', 'important'); | ||
| textarea.style.setProperty('box-sizing', 'content-box', 'important'); | ||
| this.host.prepend(textarea); | ||
| return textarea; | ||
| })(); | ||
| } | ||
| } | ||
| componentDidRender() { | ||
| if (this.el && this.el.parentElement === null) { | ||
| this.host.prepend(this.el); | ||
| valueHandler(n, o) { | ||
| if (n !== o && this.el) { | ||
| let val = n === null && n === undefined ? '' : n.toString(); | ||
| this.el.value = val; | ||
| this.textValue = val; | ||
| } | ||
| } | ||
| } | ||
| componentWillLoad() { | ||
| let value = this.value !== null && this.value !== undefined ? this.value.toString() : ''; | ||
| if (!value) { | ||
| let nestedValue = this.host.childNodes; | ||
| for (let idx = 0; idx < nestedValue.length; idx++) { | ||
| let el = nestedValue[idx]; | ||
| if (el.nodeType === Node.TEXT_NODE) { | ||
| this.value += el.textContent; | ||
| componentDidRender() { | ||
| if (this.el && this.el.parentElement === null) { | ||
| this.host.prepend(this.el); | ||
| } | ||
| } | ||
| } | ||
| this.textValue = this.value; | ||
| dummyHandler.bind(this)({ | ||
| excludeAttribute: ['value', 'rows', 'cols'], | ||
| moveIdToSlotElement: true, | ||
| excludeStyle: ['border', 'margin', 'padding', 'max', 'min', 'width', 'height'], | ||
| mirrorStyle: (hostCss) => { | ||
| this.el.style.setProperty('border-radius', hostCss['border-radius'], 'important'); | ||
| // make text input fill the host | ||
| let padding = [ | ||
| hostCss['padding-top'], | ||
| hostCss['padding-right'], | ||
| hostCss['padding-bottom'], | ||
| hostCss['padding-left'] | ||
| ]; | ||
| this.el.style.setProperty('padding', hostCss['padding'], 'important'); | ||
| this.el.style.setProperty('margin', padding.map(p => { | ||
| return `-${p}`; | ||
| }).join(' '), 'important'); | ||
| this.el.style.setProperty('min-height', `calc(${hostCss['min-height']} - ${padding[0]} - ${padding[2]})`, 'important'); | ||
| } | ||
| }); | ||
| // dispatch mounted event when finished loading | ||
| this.host.dispatchEvent(new CustomEvent('mounted')); | ||
| } | ||
| render() { | ||
| return (h(Host, { disabled: this.disabled }, h("div", { class: 'shell' }, h("slot", { name: this.slotName, onSlotchange: () => this.componentDidRender() }), h("div", { class: 'text-value', "text-value": this.textValue + ' ' }, h("div", null, h("slot", null)))))); | ||
| } | ||
| static get is() { return "sui-textarea"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get originalStyleUrls() { | ||
| return { | ||
| "$": ["sui-textarea.css"] | ||
| }; | ||
| } | ||
| static get styleUrls() { | ||
| return { | ||
| "$": ["sui-textarea.css"] | ||
| }; | ||
| } | ||
| static get properties() { | ||
| return { | ||
| "value": { | ||
| "type": "string", | ||
| "mutable": true, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "" | ||
| }, | ||
| "attribute": "value", | ||
| "reflect": false, | ||
| "defaultValue": "''" | ||
| }, | ||
| "disabled": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "" | ||
| }, | ||
| "attribute": "disabled", | ||
| "reflect": false | ||
| }, | ||
| "el": { | ||
| "type": "unknown", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "HTMLTextAreaElement", | ||
| "resolved": "HTMLTextAreaElement", | ||
| "references": { | ||
| "HTMLTextAreaElement": { | ||
| "location": "global" | ||
| componentWillLoad() { | ||
| let value = this.value !== null && this.value !== undefined ? this.value.toString() : ''; | ||
| if (!value) { | ||
| let nestedValue = this.host.childNodes; | ||
| for (let idx = 0; idx < nestedValue.length; idx++) { | ||
| let el = nestedValue[idx]; | ||
| if (el.nodeType === Node.TEXT_NODE) { | ||
| this.value += el.textContent; | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "" | ||
| }, | ||
| "defaultValue": "(() => {\n let value = this.value ? this.value.toString() : '';\n\n // create new element\n const textarea = document.createElement('textarea');\n if (value) {\n textarea.value = value;\n }\n\n textarea.setAttribute('slot', this.slotName);\n textarea.addEventListener('input', e => {\n this.value = (e.target as HTMLTextAreaElement).value;\n });\n\n for (let key of [\n 'font-size',\n 'line-height',\n 'font-family',\n 'font-weight',\n 'white-space',\n 'word-break'\n ]) {\n textarea.style.setProperty(key, 'inherit', 'important');\n }\n\n textarea.style.setProperty('height', '100%', 'important');\n textarea.style.setProperty('box-sizing', 'content-box', 'important');\n this.host.prepend(textarea);\n return textarea;\n })()" | ||
| } | ||
| }; | ||
| } | ||
| static get states() { | ||
| return { | ||
| "textValue": {} | ||
| }; | ||
| } | ||
| static get elementRef() { return "host"; } | ||
| static get watchers() { | ||
| return [{ | ||
| "propName": "value", | ||
| "methodName": "valueHandler" | ||
| }]; | ||
| } | ||
| } | ||
| this.textValue = this.value; | ||
| dummyHandler.bind(this)({ | ||
| excludeAttribute: ['value', 'rows', 'cols'], | ||
| moveIdToSlotElement: true, | ||
| excludeStyle: ['border', 'margin', 'padding', 'max', 'min', 'width', 'height'], | ||
| mirrorStyle: (hostCss) => { | ||
| this.el.style.setProperty('border-radius', hostCss['border-radius'], 'important'); | ||
| // make text input fill the host | ||
| let padding = [ | ||
| hostCss['padding-top'], | ||
| hostCss['padding-right'], | ||
| hostCss['padding-bottom'], | ||
| hostCss['padding-left'] | ||
| ]; | ||
| this.el.style.setProperty('padding', hostCss['padding'], 'important'); | ||
| this.el.style.setProperty('margin', padding.map(p => { | ||
| return `-${p}`; | ||
| }).join(' '), 'important'); | ||
| this.el.style.setProperty('min-height', `calc(${hostCss['min-height']} - ${padding[0]} - ${padding[2]})`, 'important'); | ||
| } | ||
| }); | ||
| // dispatch mounted event when finished loading | ||
| this.host.dispatchEvent(new CustomEvent('mounted')); | ||
| } | ||
| render() { | ||
| return (h(Host, { key: 'fd0cc5b66029f1dcdbc8eca362e39e62b3d5eb15', disabled: this.disabled }, h("div", { key: '40dc43ff0ec20da55fc095b7c041ab6d481488ce', class: 'shell' }, h("slot", { key: '59cab79f0635cef39c8e173b75a61360e4aa71a4', name: this.slotName, onSlotchange: () => this.componentDidRender() }), h("div", { key: 'd4b9e3d48789479f2f0bae09b7491c17b4f5a94d', class: 'text-value', "text-value": this.textValue + ' ' }, h("div", { key: '2632330ecb0ea4cea570e4a2fc98249194fa2fe9' }, h("slot", { key: '1e99d5edb2e777d1451976ed617bd34b6fc0e632' })))))); | ||
| } | ||
| static get is() { return "sui-textarea"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get originalStyleUrls() { | ||
| return { | ||
| "$": ["sui-textarea.css"] | ||
| }; | ||
| } | ||
| static get styleUrls() { | ||
| return { | ||
| "$": ["sui-textarea.css"] | ||
| }; | ||
| } | ||
| static get properties() { | ||
| return { | ||
| "value": { | ||
| "type": "string", | ||
| "mutable": true, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "" | ||
| }, | ||
| "attribute": "value", | ||
| "reflect": false, | ||
| "defaultValue": "''" | ||
| }, | ||
| "disabled": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "" | ||
| }, | ||
| "attribute": "disabled", | ||
| "reflect": false | ||
| }, | ||
| "el": { | ||
| "type": "unknown", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "HTMLTextAreaElement", | ||
| "resolved": "HTMLTextAreaElement", | ||
| "references": { | ||
| "HTMLTextAreaElement": { | ||
| "location": "global", | ||
| "id": "global::HTMLTextAreaElement" | ||
| } | ||
| } | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "" | ||
| }, | ||
| "defaultValue": "(() => {\n let value = this.value ? this.value.toString() : '';\n\n // create new element\n const textarea = document.createElement('textarea');\n if (value) {\n textarea.value = value;\n }\n\n textarea.setAttribute('slot', this.slotName);\n textarea.addEventListener('input', e => {\n this.value = (e.target as HTMLTextAreaElement).value;\n });\n\n for (let key of [\n 'font-size',\n 'line-height',\n 'font-family',\n 'font-weight',\n 'white-space',\n 'word-break'\n ]) {\n textarea.style.setProperty(key, 'inherit', 'important');\n }\n\n textarea.style.setProperty('height', '100%', 'important');\n textarea.style.setProperty('box-sizing', 'content-box', 'important');\n this.host.prepend(textarea);\n return textarea;\n })()" | ||
| } | ||
| }; | ||
| } | ||
| static get states() { | ||
| return { | ||
| "textValue": {} | ||
| }; | ||
| } | ||
| static get elementRef() { return "host"; } | ||
| static get watchers() { | ||
| return [{ | ||
| "propName": "value", | ||
| "methodName": "valueHandler" | ||
| }]; | ||
| } | ||
| } | ||
| //# sourceMappingURL=sui-textarea.js.map |
@@ -1,63 +0,60 @@ | ||
| import { Host, h } from '@stencil/core'; | ||
| import { Host, h } from "@stencil/core"; | ||
| export class SuiTooltip { | ||
| constructor() { | ||
| this.maxWidth = '100vw'; | ||
| this.classNames = ''; | ||
| this.tipBackgroundColor = 'transparent'; | ||
| } | ||
| setPosition(e) { | ||
| let y = window.innerHeight / 2; | ||
| let x = window.innerWidth / 2; | ||
| let isBottom = e.clientY < y; | ||
| let isLeft = e.clientX > x; | ||
| this.classNames = ''; | ||
| if (isBottom) { | ||
| this.classNames += ' bottom'; | ||
| constructor() { | ||
| this.classNames = ''; | ||
| this.tipBackgroundColor = 'transparent'; | ||
| } | ||
| else { | ||
| this.classNames += ' top'; | ||
| setPosition(e) { | ||
| let y = window.innerHeight / 2; | ||
| let x = window.innerWidth / 2; | ||
| let isBottom = e.clientY < y; | ||
| let isLeft = e.clientX > x; | ||
| this.classNames = ''; | ||
| if (isBottom) { | ||
| this.classNames += ' bottom'; | ||
| } | ||
| else { | ||
| this.classNames += ' top'; | ||
| } | ||
| if (isLeft) { | ||
| this.classNames += ' left'; | ||
| } | ||
| else { | ||
| this.classNames += ' right'; | ||
| } | ||
| let tip = this.host.querySelectorAll('[slot="tip"]'); | ||
| this.tipBackgroundColor = window.getComputedStyle(tip[0]).getPropertyValue('background-color'); | ||
| } | ||
| if (isLeft) { | ||
| this.classNames += ' left'; | ||
| this.maxWidth = `${e.clientX - 16}px`; | ||
| render() { | ||
| return (h(Host, { key: '55f111fc62de75215d1f4b5829aeead84f36e60f' }, h("div", { key: '8df70c5bfcc671e0e2477dae26139cd609ee01bf', class: 'sui-tooltip' + this.classNames }, h("div", { key: '6c834bdd0589a8533628a555beeb55d8a9a8ab79', class: 'sui-tool' }, h("slot", { key: '8b466243a3495d36b98961140a28515692879120', name: 'tool' }), h("div", { key: '677ddbc5bc057f2edae2183815e74ed67d55b4d9', class: 'sui-tip', style: { '--tip-background-color': this.tipBackgroundColor } }, h("slot", { key: '9fbb2cb45e605f3a0a2317485adc1b6c79731357', name: 'tip' })), h("div", { key: '50b4b3f3333e85acc1d67358a09559106d7bc560', class: 'tip-arrow' + this.classNames, style: { '--tip-background-color': this.tipBackgroundColor } }))))); | ||
| } | ||
| else { | ||
| this.classNames += ' right'; | ||
| this.maxWidth = `${window.innerWidth - e.clientX - 16}px`; | ||
| static get is() { return "sui-tooltip"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get originalStyleUrls() { | ||
| return { | ||
| "$": ["sui-tooltip.css"] | ||
| }; | ||
| } | ||
| let tip = this.host.querySelectorAll('[slot="tip"]'); | ||
| this.tipBackgroundColor = window.getComputedStyle(tip[0]).getPropertyValue('background-color'); | ||
| } | ||
| render() { | ||
| return (h(Host, null, h("div", { class: 'sui-tooltip' + this.classNames }, h("div", { class: 'sui-tool' }, h("slot", { name: 'tool' }), h("div", { class: 'sui-tip', style: { '--tip-max-width': this.maxWidth, '--tip-background-color': this.tipBackgroundColor } }, h("slot", { name: 'tip' })), h("div", { class: 'tip-arrow' + this.classNames, style: { '--tip-background-color': this.tipBackgroundColor } }))))); | ||
| } | ||
| static get is() { return "sui-tooltip"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get originalStyleUrls() { | ||
| return { | ||
| "$": ["sui-tooltip.css"] | ||
| }; | ||
| } | ||
| static get styleUrls() { | ||
| return { | ||
| "$": ["sui-tooltip.css"] | ||
| }; | ||
| } | ||
| static get states() { | ||
| return { | ||
| "maxWidth": {}, | ||
| "classNames": {}, | ||
| "tipBackgroundColor": {} | ||
| }; | ||
| } | ||
| static get elementRef() { return "host"; } | ||
| static get listeners() { | ||
| return [{ | ||
| "name": "mouseenter", | ||
| "method": "setPosition", | ||
| "target": undefined, | ||
| "capture": false, | ||
| "passive": true | ||
| }]; | ||
| } | ||
| static get styleUrls() { | ||
| return { | ||
| "$": ["sui-tooltip.css"] | ||
| }; | ||
| } | ||
| static get states() { | ||
| return { | ||
| "classNames": {}, | ||
| "tipBackgroundColor": {} | ||
| }; | ||
| } | ||
| static get elementRef() { return "host"; } | ||
| static get listeners() { | ||
| return [{ | ||
| "name": "mouseenter", | ||
| "method": "setPosition", | ||
| "target": undefined, | ||
| "capture": false, | ||
| "passive": true | ||
| }]; | ||
| } | ||
| } | ||
| //# sourceMappingURL=sui-tooltip.js.map |
| export {}; | ||
| //# sourceMappingURL=index.js.map |
| export const eventList = [ | ||
| // 'abort' | ||
| // , | ||
| // 'animationend' | ||
| // , | ||
| // 'animationiteration' | ||
| // , | ||
| // 'animationstart' | ||
| // , | ||
| // 'auxclick' | ||
| // , | ||
| 'beforecopy', | ||
| 'beforecut', | ||
| 'beforeinput', | ||
| // 'beforematch' | ||
| // , | ||
| 'beforepaste', | ||
| // 'beforexrselect' | ||
| // , | ||
| 'blur', | ||
| // 'cancel' | ||
| // , | ||
| // 'canplay' | ||
| // , | ||
| // 'canplaythrough' | ||
| // , | ||
| 'change', | ||
| 'click', | ||
| // 'close' | ||
| // , | ||
| 'contextlost', | ||
| 'contextmenu', | ||
| 'contextrestored', | ||
| 'copy', | ||
| // 'cuechange' | ||
| // , | ||
| 'cut', | ||
| 'dblclick', | ||
| 'drag', | ||
| 'dragend', | ||
| 'dragenter', | ||
| 'dragleave', | ||
| 'dragover', | ||
| 'dragstart', | ||
| 'drop', | ||
| // 'durationchange' | ||
| // , | ||
| // 'emptied' | ||
| // , | ||
| // 'ended' | ||
| // , | ||
| // 'error' | ||
| // , | ||
| 'focus', | ||
| // 'formdata' | ||
| // , | ||
| // 'fullscreenchange' | ||
| // , | ||
| // 'fullscreenerror' | ||
| // , | ||
| // 'gotpointercapture' | ||
| // , | ||
| 'input', | ||
| 'invalid', | ||
| 'keydown', | ||
| 'keypress', | ||
| 'keyup', | ||
| // 'load' | ||
| // , | ||
| // 'loadeddata' | ||
| // , | ||
| // 'loadedmetadata' | ||
| // , | ||
| // 'loadstart' | ||
| // , | ||
| // 'lostpointercapture' | ||
| // , | ||
| 'mousedown', | ||
| // 'mouseenter' | ||
| // , | ||
| // 'mouseleave' | ||
| // , | ||
| 'mousemove', | ||
| 'mouseout', | ||
| 'mouseover', | ||
| 'mouseup', | ||
| 'mousewheel', | ||
| 'paste', | ||
| // 'pause' | ||
| // , | ||
| // 'play' | ||
| // , | ||
| // 'playing' | ||
| // , | ||
| // 'pointercancel' | ||
| // , | ||
| // 'pointerdown' | ||
| // , | ||
| // 'pointerenter' | ||
| // , | ||
| // 'pointerleave' | ||
| // , | ||
| // 'pointermove' | ||
| // , | ||
| // 'pointerout' | ||
| // , | ||
| // 'pointerover' | ||
| // , | ||
| // 'pointerrawupdate' | ||
| // , | ||
| // 'pointerup' | ||
| // , | ||
| // 'progress' | ||
| // , | ||
| // 'ratechange' | ||
| // , | ||
| 'reset', | ||
| // 'resize' | ||
| // , | ||
| // 'scroll' | ||
| // , | ||
| 'search', | ||
| // 'securitypolicyviolation' | ||
| // , | ||
| // 'seeked' | ||
| // , | ||
| // 'seeking' | ||
| // , | ||
| 'select', | ||
| // 'selectionchange' | ||
| // , | ||
| // 'selectstart' | ||
| // , | ||
| // 'slotchange' | ||
| // , | ||
| // 'stalled' | ||
| // , | ||
| 'submit', | ||
| // 'suspend' | ||
| // , | ||
| // 'timeupdate' | ||
| // , | ||
| // 'toggle' | ||
| // , | ||
| // 'transitioncancel' | ||
| // , | ||
| // 'transitionend' | ||
| // , | ||
| // 'transitionrun' | ||
| // , | ||
| // 'transitionstart' | ||
| // , | ||
| // 'volumechange' | ||
| // , | ||
| // 'waiting' | ||
| // , | ||
| // 'webkitanimationend' | ||
| // , | ||
| // 'webkitanimationiteration' | ||
| // , | ||
| // 'webkitanimationstart' | ||
| // , | ||
| // 'webkitfullscreenchange' | ||
| // , | ||
| // 'webkitfullscreenerror' | ||
| // , | ||
| // 'webkittransitionend' | ||
| // , | ||
| 'wheel' | ||
| // 'abort' | ||
| // , | ||
| // 'animationend' | ||
| // , | ||
| // 'animationiteration' | ||
| // , | ||
| // 'animationstart' | ||
| // , | ||
| // 'auxclick' | ||
| // , | ||
| 'beforecopy', | ||
| 'beforecut', | ||
| 'beforeinput', | ||
| // 'beforematch' | ||
| // , | ||
| 'beforepaste', | ||
| // 'beforexrselect' | ||
| // , | ||
| 'blur', | ||
| // 'cancel' | ||
| // , | ||
| // 'canplay' | ||
| // , | ||
| // 'canplaythrough' | ||
| // , | ||
| 'change', | ||
| 'click', | ||
| // 'close' | ||
| // , | ||
| 'contextlost', | ||
| 'contextmenu', | ||
| 'contextrestored', | ||
| 'copy', | ||
| // 'cuechange' | ||
| // , | ||
| 'cut', | ||
| 'dblclick', | ||
| 'drag', | ||
| 'dragend', | ||
| 'dragenter', | ||
| 'dragleave', | ||
| 'dragover', | ||
| 'dragstart', | ||
| 'drop', | ||
| // 'durationchange' | ||
| // , | ||
| // 'emptied' | ||
| // , | ||
| // 'ended' | ||
| // , | ||
| // 'error' | ||
| // , | ||
| 'focus', | ||
| // 'formdata' | ||
| // , | ||
| // 'fullscreenchange' | ||
| // , | ||
| // 'fullscreenerror' | ||
| // , | ||
| // 'gotpointercapture' | ||
| // , | ||
| 'input', | ||
| 'invalid', | ||
| 'keydown', | ||
| 'keypress', | ||
| 'keyup', | ||
| // 'load' | ||
| // , | ||
| // 'loadeddata' | ||
| // , | ||
| // 'loadedmetadata' | ||
| // , | ||
| // 'loadstart' | ||
| // , | ||
| // 'lostpointercapture' | ||
| // , | ||
| 'mousedown', | ||
| // 'mouseenter' | ||
| // , | ||
| // 'mouseleave' | ||
| // , | ||
| 'mousemove', | ||
| 'mouseout', | ||
| 'mouseover', | ||
| 'mouseup', | ||
| 'mousewheel', | ||
| 'paste', | ||
| // 'pause' | ||
| // , | ||
| // 'play' | ||
| // , | ||
| // 'playing' | ||
| // , | ||
| // 'pointercancel' | ||
| // , | ||
| // 'pointerdown' | ||
| // , | ||
| // 'pointerenter' | ||
| // , | ||
| // 'pointerleave' | ||
| // , | ||
| // 'pointermove' | ||
| // , | ||
| // 'pointerout' | ||
| // , | ||
| // 'pointerover' | ||
| // , | ||
| // 'pointerrawupdate' | ||
| // , | ||
| // 'pointerup' | ||
| // , | ||
| // 'progress' | ||
| // , | ||
| // 'ratechange' | ||
| // , | ||
| 'reset', | ||
| // 'resize' | ||
| // , | ||
| // 'scroll' | ||
| // , | ||
| 'search', | ||
| // 'securitypolicyviolation' | ||
| // , | ||
| // 'seeked' | ||
| // , | ||
| // 'seeking' | ||
| // , | ||
| 'select', | ||
| // 'selectionchange' | ||
| // , | ||
| // 'selectstart' | ||
| // , | ||
| // 'slotchange' | ||
| // , | ||
| // 'stalled' | ||
| // , | ||
| 'submit', | ||
| // 'suspend' | ||
| // , | ||
| // 'timeupdate' | ||
| // , | ||
| // 'toggle' | ||
| // , | ||
| // 'transitioncancel' | ||
| // , | ||
| // 'transitionend' | ||
| // , | ||
| // 'transitionrun' | ||
| // , | ||
| // 'transitionstart' | ||
| // , | ||
| // 'volumechange' | ||
| // , | ||
| // 'waiting' | ||
| // , | ||
| // 'webkitanimationend' | ||
| // , | ||
| // 'webkitanimationiteration' | ||
| // , | ||
| // 'webkitanimationstart' | ||
| // , | ||
| // 'webkitfullscreenchange' | ||
| // , | ||
| // 'webkitfullscreenerror' | ||
| // , | ||
| // 'webkittransitionend' | ||
| // , | ||
| 'wheel' | ||
| ]; | ||
| export function cloneEvents(el, options) { | ||
| // clone events to another element | ||
| // callback | ||
| let { dispatchTo, eventCallback = null, bypass = [] } = options || {}; | ||
| let cb = (ev) => { | ||
| let new_ev = new Event(ev.type); | ||
| if (eventCallback && eventCallback.type === ev.type && typeof eventCallback.callback === 'function') { | ||
| eventCallback.callback(new_ev); | ||
| // clone events to another element | ||
| // callback | ||
| let { dispatchTo, eventCallback = null, bypass = [] } = options || {}; | ||
| let cb = (ev) => { | ||
| let new_ev = new Event(ev.type); | ||
| if (eventCallback && eventCallback.type === ev.type && typeof eventCallback.callback === 'function') { | ||
| eventCallback.callback(new_ev); | ||
| } | ||
| dispatchTo.dispatchEvent(new_ev); | ||
| }; | ||
| for (let name of eventList) { | ||
| if (!bypass.includes(name)) { | ||
| el.addEventListener(name, cb, { passive: name.includes('scroll') || name.includes('wheel') }); | ||
| } | ||
| } | ||
| dispatchTo.dispatchEvent(new_ev); | ||
| }; | ||
| for (let name of eventList) { | ||
| if (!bypass.includes(name)) { | ||
| el.addEventListener(name, cb, { passive: name.includes('scroll') || name.includes('wheel') }); | ||
| } | ||
| } | ||
| } | ||
| export function format(first, middle, last) { | ||
| return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''); | ||
| return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''); | ||
| } | ||
| function getElementAttributes(nodeMap) { | ||
| if (nodeMap) { | ||
| const length = nodeMap.length; | ||
| return Object.keys(nodeMap).reduce((props, current) => { | ||
| try { | ||
| const numCurrent = parseInt(current); | ||
| if (numCurrent <= length) { | ||
| const property = nodeMap[current]; | ||
| return Object.assign(Object.assign({}, props), { [property.name]: property.value }); | ||
| } | ||
| } | ||
| catch (err) { } | ||
| }, {}); | ||
| } | ||
| return {}; | ||
| if (nodeMap) { | ||
| const length = nodeMap.length; | ||
| return Object.keys(nodeMap).reduce((props, current) => { | ||
| try { | ||
| const numCurrent = parseInt(current); | ||
| if (numCurrent <= length) { | ||
| const property = nodeMap[current]; | ||
| return Object.assign(Object.assign({}, props), { [property.name]: property.value }); | ||
| } | ||
| } | ||
| catch (err) { } | ||
| }, {}); | ||
| } | ||
| return {}; | ||
| } | ||
| export function randomString(length = 5) { | ||
| // set random slot name to prevent users adding elements to the slot | ||
| let result = ''; | ||
| let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; | ||
| let charactersLength = characters.length; | ||
| for (let i = 0; i < length; i++) { | ||
| result += characters.charAt(Math.floor(Math.random() * charactersLength)); | ||
| } | ||
| return result; | ||
| // set random slot name to prevent users adding elements to the slot | ||
| let result = ''; | ||
| let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; | ||
| let charactersLength = characters.length; | ||
| for (let i = 0; i < length; i++) { | ||
| result += characters.charAt(Math.floor(Math.random() * charactersLength)); | ||
| } | ||
| return result; | ||
| } | ||
@@ -223,169 +223,170 @@ /** | ||
| export function dummyHandler(options = {}) { | ||
| const { excludeStyle = [], excludeAttribute = [], trackNodes = false, log = false, mirrorStyle = null, moveIdToSlotElement = false, excludeEvents = [], bounceEvents = false, mirrorEvents = false } = options || {}; | ||
| excludeStyle.push(...['display', 'position', 'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height', 'font', 'box-sizing']); | ||
| const initEvents = () => { | ||
| if (mirrorEvents) { | ||
| // dispatch the host event to hidden this.el | ||
| let iter = (Array.isArray(mirrorEvents) && mirrorEvents.length ? mirrorEvents : eventList); | ||
| for (let name of iter) { | ||
| let cb; | ||
| if (typeof mirrorEvents === 'object' && Object.keys(mirrorEvents).length && !Array.isArray(mirrorEvents) && mirrorEvents.hasOwnProperty(name) && typeof mirrorEvents[name] === 'function') { | ||
| cb = mirrorEvents[name]; | ||
| const { excludeStyle = [], excludeAttribute = [], trackNodes = false, log = false, mirrorStyle = null, moveIdToSlotElement = false, excludeEvents = [], bounceEvents = false, mirrorEvents = false } = options || {}; | ||
| excludeStyle.push(...['display', 'position', 'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height', 'font', 'box-sizing']); | ||
| const initEvents = () => { | ||
| if (mirrorEvents) { | ||
| // dispatch the host event to hidden this.el | ||
| let iter = (Array.isArray(mirrorEvents) && mirrorEvents.length ? mirrorEvents : eventList); | ||
| for (let name of iter) { | ||
| let cb; | ||
| if (typeof mirrorEvents === 'object' && Object.keys(mirrorEvents).length && !Array.isArray(mirrorEvents) && mirrorEvents.hasOwnProperty(name) && typeof mirrorEvents[name] === 'function') { | ||
| cb = mirrorEvents[name]; | ||
| } | ||
| if (!excludeEvents.includes(name)) { | ||
| cb = cb || typeof mirrorEvents === 'function' ? mirrorEvents : (e) => { | ||
| this.el.dispatchEvent(new Event(e.type, { | ||
| bubbles: false | ||
| })); | ||
| }; | ||
| this.host.addEventListener(name, cb, { passive: name.includes('scroll') || name.includes('wheel') }); | ||
| } | ||
| } | ||
| } | ||
| if (!excludeEvents.includes(name)) { | ||
| cb = cb || typeof mirrorEvents === 'function' ? mirrorEvents : (e) => { | ||
| this.el.dispatchEvent(new Event(e.type, { | ||
| bubbles: false | ||
| })); | ||
| }; | ||
| this.host.addEventListener(name, cb, { passive: name.includes('scroll') || name.includes('wheel') }); | ||
| if (bounceEvents) { | ||
| // dispatch the host event to hidden this.el | ||
| let iter = (Array.isArray(bounceEvents) && bounceEvents.length ? bounceEvents : eventList); | ||
| for (let name of iter) { | ||
| let cb; | ||
| if (typeof bounceEvents === 'object' && Object.keys(bounceEvents).length && !Array.isArray(bounceEvents) && bounceEvents.hasOwnProperty(name) && typeof bounceEvents[name] === 'function') { | ||
| cb = bounceEvents[name]; | ||
| } | ||
| cb = cb || typeof bounceEvents === 'function' ? bounceEvents : (e) => { | ||
| if (!e.bubbles) { | ||
| this.host.dispatchEvent(new Event(e.type, { | ||
| bubbles: true | ||
| })); | ||
| } | ||
| }; | ||
| this.el.addEventListener(name, cb); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| if (bounceEvents) { | ||
| // dispatch the host event to hidden this.el | ||
| let iter = (Array.isArray(bounceEvents) && bounceEvents.length ? bounceEvents : eventList); | ||
| for (let name of iter) { | ||
| let cb; | ||
| if (typeof bounceEvents === 'object' && Object.keys(bounceEvents).length && !Array.isArray(bounceEvents) && bounceEvents.hasOwnProperty(name) && typeof bounceEvents[name] === 'function') { | ||
| cb = bounceEvents[name]; | ||
| }; | ||
| const setDummyAttribute = (attName, val) => { | ||
| if (attName !== 'hidden' && attName !== 'class' && attName !== 'id' && attName !== 'style' && !excludeAttribute.includes(attName)) { | ||
| // skip settings 'hidden' | 'class' | 'id' | excluded attribute list | ||
| this.el.setAttribute(attName, val); | ||
| } | ||
| cb = cb || typeof bounceEvents === 'function' ? bounceEvents : (e) => { | ||
| if (!e.bubbles) { | ||
| this.host.dispatchEvent(new Event(e.type, { | ||
| bubbles: true | ||
| })); | ||
| } | ||
| }; | ||
| this.el.addEventListener(name, cb); | ||
| } | ||
| } | ||
| }; | ||
| const setDummyAttribute = (attName, val) => { | ||
| if (attName !== 'hidden' && attName !== 'class' && attName !== 'id' && attName !== 'style' && !excludeAttribute.includes(attName)) { | ||
| // skip settings 'hidden' | 'class' | 'id' | excluded attribute list | ||
| this.el.setAttribute(attName, val); | ||
| } | ||
| if (mirrorStyle) { | ||
| const mirrorStyleBypass = []; | ||
| // mirror styling | ||
| if (attName === 'style' && mirrorStyle === true) { | ||
| let styleProps = val.split(';'); | ||
| for (let s of styleProps) { | ||
| if (!s) { | ||
| continue; | ||
| } | ||
| let keyVal = s.split(':'); | ||
| let val = keyVal[1].split('!'); | ||
| if (!excludeStyle.includes(keyVal[0]) && (() => { | ||
| // exclude related styles ex) border-xxxx | ||
| for (let e of excludeStyle) { | ||
| if (e.includes(keyVal[0] + '-')) { | ||
| return false; | ||
| } | ||
| if (mirrorStyle) { | ||
| const mirrorStyleBypass = []; | ||
| // mirror styling | ||
| if (attName === 'style' && mirrorStyle === true) { | ||
| let styleProps = val.split(';'); | ||
| for (let s of styleProps) { | ||
| if (!s) { | ||
| continue; | ||
| } | ||
| let keyVal = s.split(':'); | ||
| let val = keyVal[1].split('!'); | ||
| if (!excludeStyle.includes(keyVal[0]) && (() => { | ||
| // exclude related styles ex) border-xxxx | ||
| for (let e of excludeStyle) { | ||
| if (e.includes(keyVal[0] + '-')) { | ||
| return false; | ||
| } | ||
| } | ||
| return true; | ||
| })() && CSS.supports(keyVal[0], val[0])) { | ||
| this.el.style.setProperty(keyVal[0], val[0], val[1] || null); | ||
| if (Array.isArray(mirrorStyle) && mirrorStyle.includes(keyVal[0])) { | ||
| // add to style copy bypass list | ||
| mirrorStyleBypass.push(keyVal[0]); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return true; | ||
| })() && CSS.supports(keyVal[0], val[0])) { | ||
| this.el.style.setProperty(keyVal[0], val[0], val[1] || null); | ||
| if (Array.isArray(mirrorStyle) && mirrorStyle.includes(keyVal[0])) { | ||
| // add to style copy bypass list | ||
| mirrorStyleBypass.push(keyVal[0]); | ||
| let hostStyle = getComputedStyle(this.host); | ||
| if (typeof mirrorStyle === 'function') { | ||
| // callback | ||
| return mirrorStyle(hostStyle); | ||
| } | ||
| } | ||
| // copy css styles | ||
| for (let s of mirrorStyle) { | ||
| if (!mirrorStyleBypass.includes(s)) { | ||
| if (!excludeStyle.includes(s) && (() => { | ||
| // exclude related styles ex) border-xxxx | ||
| for (let e of excludeStyle) { | ||
| if (e.includes(s + '-')) { | ||
| return false; | ||
| } | ||
| } | ||
| return true; | ||
| })() && CSS.supports(s, hostStyle[s])) { | ||
| this.el.style.setProperty(s, hostStyle[s]); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| let hostStyle = getComputedStyle(this.host); | ||
| if (typeof mirrorStyle === 'function') { | ||
| // callback | ||
| return mirrorStyle(hostStyle); | ||
| } | ||
| // copy css styles | ||
| for (let s of mirrorStyle) { | ||
| if (!mirrorStyleBypass.includes(s)) { | ||
| if (!excludeStyle.includes(s) && (() => { | ||
| // exclude related styles ex) border-xxxx | ||
| for (let e of excludeStyle) { | ||
| if (e.includes(s + '-')) { | ||
| return false; | ||
| } | ||
| }; | ||
| const observe = () => { | ||
| this.observer = new MutationObserver((mutations) => { | ||
| let logger = (l) => { | ||
| if (!log) { | ||
| return; | ||
| } | ||
| if (typeof log === 'boolean') { | ||
| return console.log(l); | ||
| } | ||
| if (typeof log === 'function') { | ||
| return log(l); | ||
| } | ||
| }; | ||
| for (let m of mutations) { | ||
| let attributeName = m.attributeName; | ||
| if (!attributeName && trackNodes) { | ||
| if (typeof trackNodes === 'function') { | ||
| logger({ attributeName, mutationRecord: m }); | ||
| trackNodes(m); | ||
| } | ||
| continue; | ||
| } | ||
| let newValue = m.target.getAttribute(attributeName); | ||
| let oldValue = m.oldValue; | ||
| if (newValue === oldValue) { | ||
| // skip same values | ||
| continue; | ||
| } | ||
| logger({ attributeName, newValue, oldValue }); | ||
| // ! do not change the order of execution below ! | ||
| if (newValue === null) { | ||
| // attribute is removed | ||
| this.el.removeAttribute(attributeName); | ||
| continue; | ||
| } | ||
| setDummyAttribute(attributeName, newValue); | ||
| } | ||
| return true; | ||
| })() && CSS.supports(s, hostStyle[s])) { | ||
| this.el.style.setProperty(s, hostStyle[s]); | ||
| } | ||
| }); | ||
| this.observer.observe(this.host, { | ||
| attributes: true, | ||
| attributeOldValue: true, | ||
| childList: !!trackNodes | ||
| }); | ||
| }; | ||
| const init = (fullInit = false) => { | ||
| if (fullInit) { | ||
| initEvents(); | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| const observe = () => { | ||
| this.observer = new MutationObserver((mutations) => { | ||
| let logger = (l) => { | ||
| if (!log) { | ||
| return; | ||
| // attribute setup on load | ||
| const hostAttributes = getElementAttributes(this.host.attributes); | ||
| for (let attName in hostAttributes) { | ||
| if (attName.substring(0, 2) !== 'on') { | ||
| // skip onevent attributes | ||
| setDummyAttribute(attName, hostAttributes[attName]); | ||
| } | ||
| if (attName === 'id' && moveIdToSlotElement) { | ||
| // move id attribute to this.el if allowed | ||
| this.el.setAttribute(attName, hostAttributes[attName]); | ||
| this.host.removeAttribute(attName); | ||
| } | ||
| if (attName === 'autofocus') { | ||
| // auto focus on load | ||
| this.host.focus(); | ||
| } | ||
| } | ||
| if (typeof log === 'boolean') { | ||
| return console.log(l); | ||
| if (fullInit) { | ||
| observe(); | ||
| } | ||
| if (typeof log === 'function') { | ||
| return log(l); | ||
| } | ||
| }; | ||
| for (let m of mutations) { | ||
| let attributeName = m.attributeName; | ||
| if (!attributeName && trackNodes) { | ||
| if (typeof trackNodes === 'function') { | ||
| logger({ attributeName, mutationRecord: m }); | ||
| trackNodes(m); | ||
| } | ||
| continue; | ||
| } | ||
| let newValue = m.target.getAttribute(attributeName); | ||
| let oldValue = m.oldValue; | ||
| if (newValue === oldValue) { | ||
| // skip same values | ||
| continue; | ||
| } | ||
| logger({ attributeName, newValue, oldValue }); | ||
| // ! do not change the order of execution below ! | ||
| if (newValue === null) { | ||
| // attribute is removed | ||
| this.el.removeAttribute(attributeName); | ||
| continue; | ||
| } | ||
| setDummyAttribute(attributeName, newValue); | ||
| } | ||
| }); | ||
| this.observer.observe(this.host, { | ||
| attributes: true, | ||
| attributeOldValue: true, | ||
| childList: !!trackNodes | ||
| }); | ||
| }; | ||
| const init = (fullInit = false) => { | ||
| if (fullInit) { | ||
| initEvents(); | ||
| } | ||
| // attribute setup on load | ||
| const hostAttributes = getElementAttributes(this.host.attributes); | ||
| for (let attName in hostAttributes) { | ||
| if (attName.substring(0, 2) !== 'on') { | ||
| // skip onevent attributes | ||
| setDummyAttribute(attName, hostAttributes[attName]); | ||
| } | ||
| if (attName === 'id' && moveIdToSlotElement) { | ||
| // move id attribute to this.el if allowed | ||
| this.el.setAttribute(attName, hostAttributes[attName]); | ||
| this.host.removeAttribute(attName); | ||
| } | ||
| if (attName === 'autofocus') { | ||
| // auto focus on load | ||
| this.host.focus(); | ||
| } | ||
| } | ||
| if (fullInit) { | ||
| observe(); | ||
| } | ||
| }; | ||
| init(true); | ||
| return { init }; | ||
| }; | ||
| init(true); | ||
| return { init }; | ||
| } | ||
| //# sourceMappingURL=utils.js.map |
| //# sourceMappingURL=index.js.map |
@@ -1,18 +0,13 @@ | ||
| import { p as promiseResolve, b as bootstrapLazy } from './index-db1e4f67.js'; | ||
| export { s as setNonce } from './index-db1e4f67.js'; | ||
| import { b as bootstrapLazy } from './index-eb54f0e7.js'; | ||
| export { s as setNonce } from './index-eb54f0e7.js'; | ||
| import { g as globalScripts } from './app-globals-0f993ce5.js'; | ||
| /* | ||
| Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com | ||
| */ | ||
| const patchEsm = () => { | ||
| return promiseResolve(); | ||
| const defineCustomElements = async (win, options) => { | ||
| if (typeof window === 'undefined') return undefined; | ||
| await globalScripts(); | ||
| return bootstrapLazy([["sui-flextext_5",[[1,"sui-flextext",{"minSize":[1026,"min-size"],"maxSize":[1026,"max-size"]}],[1,"sui-nav",{"autoHide":[2,"auto-hide"]}],[1,"sui-overlay",{"position":[1],"transitionTime":[1,"transition-time"],"close":[64],"open":[64]}],[1,"sui-textarea",{"value":[1025],"disabled":[4],"el":[16],"textValue":[32]},null,{"value":["valueHandler"]}],[1,"sui-tooltip",{"classNames":[32],"tipBackgroundColor":[32]},[[1,"mouseenter","setPosition"]]]]]], options); | ||
| }; | ||
| const defineCustomElements = (win, options) => { | ||
| if (typeof window === 'undefined') return Promise.resolve(); | ||
| return patchEsm().then(() => { | ||
| return bootstrapLazy([["sui-flextext_5",[[1,"sui-flextext",{"minSize":[1026,"min-size"],"maxSize":[1026,"max-size"]}],[1,"sui-nav",{"autoHide":[2,"auto-hide"]}],[1,"sui-overlay",{"position":[1],"transitionTime":[1,"transition-time"],"close":[64],"open":[64]}],[1,"sui-textarea",{"value":[1025],"disabled":[4],"el":[16],"textValue":[32]}],[1,"sui-tooltip",{"maxWidth":[32],"classNames":[32],"tipBackgroundColor":[32]},[[1,"mouseenter","setPosition"]]]]]], options); | ||
| }); | ||
| }; | ||
| export { defineCustomElements }; | ||
| export { defineCustomElements }; | ||
| //# sourceMappingURL=loader.js.map |
@@ -1,18 +0,22 @@ | ||
| import { p as promiseResolve, b as bootstrapLazy } from './index-db1e4f67.js'; | ||
| export { s as setNonce } from './index-db1e4f67.js'; | ||
| import { p as promiseResolve, b as bootstrapLazy } from './index-eb54f0e7.js'; | ||
| export { s as setNonce } from './index-eb54f0e7.js'; | ||
| import { g as globalScripts } from './app-globals-0f993ce5.js'; | ||
| /* | ||
| Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com | ||
| Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com | ||
| */ | ||
| const patchBrowser = () => { | ||
| const importMeta = import.meta.url; | ||
| const opts = {}; | ||
| if (importMeta !== '') { | ||
| opts.resourcesUrl = new URL('.', importMeta).href; | ||
| } | ||
| return promiseResolve(opts); | ||
| var patchBrowser = () => { | ||
| const importMeta = import.meta.url; | ||
| const opts = {}; | ||
| if (importMeta !== "") { | ||
| opts.resourcesUrl = new URL(".", importMeta).href; | ||
| } | ||
| return promiseResolve(opts); | ||
| }; | ||
| patchBrowser().then(options => { | ||
| return bootstrapLazy([["sui-flextext_5",[[1,"sui-flextext",{"minSize":[1026,"min-size"],"maxSize":[1026,"max-size"]}],[1,"sui-nav",{"autoHide":[2,"auto-hide"]}],[1,"sui-overlay",{"position":[1],"transitionTime":[1,"transition-time"],"close":[64],"open":[64]}],[1,"sui-textarea",{"value":[1025],"disabled":[4],"el":[16],"textValue":[32]}],[1,"sui-tooltip",{"maxWidth":[32],"classNames":[32],"tipBackgroundColor":[32]},[[1,"mouseenter","setPosition"]]]]]], options); | ||
| patchBrowser().then(async (options) => { | ||
| await globalScripts(); | ||
| return bootstrapLazy([["sui-flextext_5",[[1,"sui-flextext",{"minSize":[1026,"min-size"],"maxSize":[1026,"max-size"]}],[1,"sui-nav",{"autoHide":[2,"auto-hide"]}],[1,"sui-overlay",{"position":[1],"transitionTime":[1,"transition-time"],"close":[64],"open":[64]}],[1,"sui-textarea",{"value":[1025],"disabled":[4],"el":[16],"textValue":[32]},null,{"value":["valueHandler"]}],[1,"sui-tooltip",{"classNames":[32],"tipBackgroundColor":[32]},[[1,"mouseenter","setPosition"]]]]]], options); | ||
| }); | ||
| //# sourceMappingURL=skateui.js.map |
@@ -1,406 +0,412 @@ | ||
| import { r as registerInstance, h, H as Host, g as getElement } from './index-db1e4f67.js'; | ||
| import { r as registerInstance, h, H as Host, g as getElement } from './index-eb54f0e7.js'; | ||
| const suiFlextextCss = ":host{display:block;cursor:default;font-size:var(--auto-size);line-height:1}"; | ||
| const SuiFlextextStyle0 = suiFlextextCss; | ||
| const SuiFlextext = class { | ||
| constructor(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| this.fontSize = null; | ||
| this.adjustSize = () => { | ||
| const lineHeightRatio = Number(this.computedStyle.lineHeight.replace('px', '')) / this.fontSize; | ||
| if (!this.host.textContent) { | ||
| this.fontSize = this.maxSize; | ||
| } | ||
| else { | ||
| const scaleDown = () => { | ||
| let height = parseFloat(this.computedStyle.height); | ||
| let howmanylines = height / (this.fontSize * lineHeightRatio); | ||
| if (howmanylines > 1 && this.fontSize > this.minSize) { | ||
| let minus = this.fontSize - 1; | ||
| this.fontSize = minus > this.minSize ? minus : this.minSize; | ||
| this.host.style.setProperty('--auto-size', `${this.fontSize}px`); | ||
| if (this.fontSize === this.minSize) { | ||
| return; | ||
| constructor(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| this.fontSize = null; | ||
| this.adjustSize = () => { | ||
| let lineHeight = Number(this.computedStyle.lineHeight.replace('px', '')); | ||
| lineHeight = isNaN(lineHeight) ? this.fontSize : lineHeight; | ||
| let lineHeightRatio = lineHeight / this.fontSize; | ||
| lineHeightRatio = lineHeightRatio > 1 ? lineHeightRatio : 1; | ||
| if (!this.host.textContent) { | ||
| this.fontSize = this.maxSize; | ||
| } | ||
| scaleDown(); | ||
| } | ||
| }; | ||
| const scaleUp = () => { | ||
| let height = parseFloat(this.computedStyle.height); | ||
| let howmanylines = height / (this.fontSize * lineHeightRatio); | ||
| if (howmanylines <= 1 && this.fontSize < this.maxSize) { | ||
| let plus = this.fontSize + 1; | ||
| this.fontSize = plus < this.maxSize ? plus : this.maxSize; | ||
| this.host.style.setProperty('--auto-size', `${this.fontSize}px`); | ||
| if (this.fontSize === this.maxSize) { | ||
| return; | ||
| else { | ||
| const scaleDown = () => { | ||
| let height = parseFloat(this.computedStyle.height); | ||
| let howmanylines = height / (this.fontSize * lineHeightRatio); | ||
| if (howmanylines > 1 && this.fontSize > this.minSize) { | ||
| let minus = this.fontSize - 1; | ||
| this.fontSize = minus > this.minSize ? minus : this.minSize; | ||
| this.host.style.setProperty('--auto-size', `${this.fontSize}px`); | ||
| if (this.fontSize === this.minSize) { | ||
| return; | ||
| } | ||
| scaleDown(); | ||
| } | ||
| }; | ||
| const scaleUp = () => { | ||
| let height = parseFloat(this.computedStyle.height); | ||
| let howmanylines = height / (this.fontSize * lineHeightRatio); | ||
| if (howmanylines <= 1 && this.fontSize < this.maxSize) { | ||
| let plus = this.fontSize + 1; | ||
| this.fontSize = plus < this.maxSize ? plus : this.maxSize; | ||
| this.host.style.setProperty('--auto-size', `${this.fontSize}px`); | ||
| if (this.fontSize === this.maxSize) { | ||
| return; | ||
| } | ||
| scaleUp(); | ||
| } | ||
| else { | ||
| scaleDown(); | ||
| } | ||
| }; | ||
| scaleUp(); | ||
| } | ||
| scaleUp(); | ||
| } | ||
| }; | ||
| scaleUp(); | ||
| scaleDown(); | ||
| } | ||
| }; | ||
| this.minSize = 0; | ||
| this.maxSize = 72; | ||
| } | ||
| componentWillLoad() { | ||
| this.maxSize = this.maxSize && typeof this.maxSize !== 'number' ? Number(this.maxSize) : this.maxSize; | ||
| this.minSize = this.minSize && typeof this.minSize !== 'number' ? Number(this.minSize) : this.minSize; | ||
| if (isNaN(this.maxSize)) { | ||
| this.maxSize = 72; | ||
| this.minSize = 0; | ||
| this.maxSize = 72; | ||
| } | ||
| if (isNaN(this.minSize)) { | ||
| this.minSize = 0; | ||
| componentWillLoad() { | ||
| this.maxSize = this.maxSize && typeof this.maxSize !== 'number' ? Number(this.maxSize) : this.maxSize; | ||
| this.minSize = this.minSize && typeof this.minSize !== 'number' ? Number(this.minSize) : this.minSize; | ||
| this.maxSize = parseInt(this.maxSize); | ||
| this.minSize = parseInt(this.minSize); | ||
| if (isNaN(this.maxSize)) { | ||
| this.maxSize = 72; | ||
| } | ||
| if (isNaN(this.minSize)) { | ||
| this.minSize = this.fontSize; | ||
| } | ||
| this.computedStyle = window.getComputedStyle(this.host); | ||
| this.fontSize = Number(this.computedStyle.fontSize.replace('px', '')); | ||
| if (this.minSize > this.maxSize) { | ||
| this.maxSize = this.minSize; | ||
| } | ||
| } | ||
| this.computedStyle = window.getComputedStyle(this.host); | ||
| this.fontSize = Number(this.computedStyle.fontSize.replace('px', '')); | ||
| if (this.minSize === 0) { | ||
| this.minSize = this.fontSize; | ||
| componentDidLoad() { | ||
| this.adjustSize(); | ||
| window.addEventListener("resize", this.adjustSize.bind(this)); | ||
| } | ||
| if (this.minSize > this.maxSize) { | ||
| this.maxSize = this.minSize; | ||
| disconnectedCallback() { | ||
| window.removeEventListener('resize', this.adjustSize.bind(this)); | ||
| } | ||
| } | ||
| componentDidLoad() { | ||
| this.adjustSize(); | ||
| window.addEventListener("resize", this.adjustSize.bind(this)); | ||
| } | ||
| disconnectedCallback() { | ||
| window.removeEventListener('resize', this.adjustSize.bind(this)); | ||
| } | ||
| render() { | ||
| return (h(Host, null, h("slot", null))); | ||
| } | ||
| get host() { return getElement(this); } | ||
| render() { | ||
| return (h(Host, { key: 'a481ea1f996d1da4b4bf77b331dcdf9908d76373' }, h("slot", { key: '7fd70a27be055a44528e307c8af8e8d8e4b85db7' }))); | ||
| } | ||
| get host() { return getElement(this); } | ||
| }; | ||
| SuiFlextext.style = suiFlextextCss; | ||
| SuiFlextext.style = SuiFlextextStyle0; | ||
| const suiNavCss = ":host{display:block;width:100%;transform:translateY(var(--nav-top));position:var(--nav-position);top:0;z-index:1}"; | ||
| const SuiNavStyle0 = suiNavCss; | ||
| const SuiNav = class { | ||
| constructor(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| this.scrollOffset = 0; | ||
| this.topOffset = 0; | ||
| this.offsetProp = 'pageYOffset'; | ||
| // ! should be variable with bind ! | ||
| // this way we can remove the event when component is destroyed | ||
| this.calcNavbarPosition = (function () { | ||
| window.requestAnimationFrame(() => { | ||
| const navHeight = parseInt(this.navCss.height); | ||
| const scrollOffset = this.parent[this.offsetProp] < 0 ? 0 : this.parent[this.offsetProp]; // on mobile, offsetProp can be negative | ||
| const offsetDifference = (this.scrollOffset - scrollOffset) / this.autoHide; | ||
| const topOffset = (() => { | ||
| let topOffset = this.topOffset + offsetDifference; | ||
| if (topOffset < -navHeight) { | ||
| // if offset is beyond navHeight | ||
| return -navHeight; | ||
| } | ||
| if (topOffset > 0) { | ||
| // offset is positive | ||
| return 0; | ||
| } | ||
| return topOffset; // return int range | ||
| })(); | ||
| this.scrollOffset = scrollOffset; // update scroll offset | ||
| this.topOffset = topOffset; | ||
| this.host.style.setProperty('--nav-top', `${topOffset}px`); // apply css variable | ||
| }); | ||
| }).bind(this); | ||
| this.autoHide = undefined; | ||
| } | ||
| componentWillLoad() { | ||
| if (this.autoHide === undefined) { | ||
| // no given attribute | ||
| return; | ||
| constructor(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| this.scrollOffset = 0; | ||
| this.topOffset = 0; | ||
| this.offsetProp = 'pageYOffset'; | ||
| // ! should be variable with bind ! | ||
| // this way we can remove the event when component is destroyed | ||
| this.calcNavbarPosition = (function () { | ||
| window.requestAnimationFrame(() => { | ||
| const navHeight = parseInt(this.navCss.height); | ||
| const scrollOffset = this.parent[this.offsetProp] < 0 ? 0 : this.parent[this.offsetProp]; // on mobile, offsetProp can be negative | ||
| const offsetDifference = (this.scrollOffset - scrollOffset) / this.autoHide; | ||
| const topOffset = (() => { | ||
| let topOffset = this.topOffset + offsetDifference; | ||
| if (topOffset < -navHeight) { | ||
| // if offset is beyond navHeight | ||
| return -navHeight; | ||
| } | ||
| if (topOffset > 0) { | ||
| // offset is positive | ||
| return 0; | ||
| } | ||
| return topOffset; // return int range | ||
| })(); | ||
| this.scrollOffset = scrollOffset; // update scroll offset | ||
| this.topOffset = topOffset; | ||
| this.host.style.setProperty('--nav-top', `${topOffset}px`); // apply css variable | ||
| }); | ||
| }).bind(this); | ||
| this.autoHide = undefined; | ||
| } | ||
| if (!this.autoHide) { | ||
| // attribute exists but empty value. set to default. | ||
| this.autoHide = 3; | ||
| } | ||
| if (this.autoHide) { | ||
| if (typeof this.autoHide === 'string') { | ||
| // html attributes are string | ||
| try { | ||
| this.autoHide = JSON.parse(this.autoHide); | ||
| componentWillLoad() { | ||
| if (this.autoHide === undefined) { | ||
| // no given attribute | ||
| return; | ||
| } | ||
| catch (err) { | ||
| this.autoHide = 0; | ||
| if (!this.autoHide) { | ||
| // attribute exists but empty value. set to default. | ||
| this.autoHide = 3; | ||
| } | ||
| } | ||
| if (typeof this.autoHide === 'boolean') { | ||
| // if 'true' | 'false' is given. | ||
| this.autoHide = this.autoHide ? 3 : 0; | ||
| } | ||
| else if (typeof this.autoHide === 'number') { | ||
| if (this.autoHide < 0) { | ||
| // if value is less than 0 | ||
| this.autoHide = 0; | ||
| if (this.autoHide) { | ||
| if (typeof this.autoHide === 'string') { | ||
| // html attributes are string | ||
| try { | ||
| this.autoHide = JSON.parse(this.autoHide); | ||
| } | ||
| catch (err) { | ||
| this.autoHide = 0; | ||
| } | ||
| } | ||
| if (typeof this.autoHide === 'boolean') { | ||
| // if 'true' | 'false' is given. | ||
| this.autoHide = this.autoHide ? 3 : 0; | ||
| } | ||
| else if (typeof this.autoHide === 'number') { | ||
| if (this.autoHide < 0) { | ||
| // if value is less than 0 | ||
| this.autoHide = 0; | ||
| } | ||
| } | ||
| else { | ||
| // other types are not allowed | ||
| this.autoHide = 0; | ||
| } | ||
| } | ||
| } | ||
| else { | ||
| // other types are not allowed | ||
| this.autoHide = 0; | ||
| } | ||
| } | ||
| } | ||
| disconnectedCallback() { | ||
| // remove windows event | ||
| if (this.offsetProp === 'pageYOffset') { | ||
| document.removeEventListener('scroll', this.calcNavbarPosition); | ||
| } | ||
| else { | ||
| this.parent.removeEventListener('scroll', this.calcNavbarPosition); | ||
| } | ||
| } | ||
| componentDidLoad() { | ||
| this.navCss = window.getComputedStyle(this.host); | ||
| this.host.style.setProperty('--nav-position', 'sticky'); // apply css variable | ||
| if (this.autoHide) { | ||
| let seekScrollableParent = (el) => { | ||
| if (el) { | ||
| if (el.scrollHeight > el.clientHeight && 'hidden' !== window.getComputedStyle(el).overflowY) { | ||
| return el; | ||
| } | ||
| else { | ||
| return seekScrollableParent(el.parentElement); | ||
| } | ||
| disconnectedCallback() { | ||
| // remove windows event | ||
| if (this.offsetProp === 'pageYOffset') { | ||
| document.removeEventListener('scroll', this.calcNavbarPosition); | ||
| } | ||
| else { | ||
| return el; | ||
| this.parent.removeEventListener('scroll', this.calcNavbarPosition); | ||
| } | ||
| }; | ||
| let scrollableParent = seekScrollableParent(this.host.parentElement); | ||
| if (scrollableParent && scrollableParent.tagName.toLowerCase() !== 'html') { | ||
| this.offsetProp = 'scrollTop'; | ||
| this.parent = scrollableParent; | ||
| this.parent.addEventListener('scroll', this.calcNavbarPosition, { passive: true }); | ||
| } | ||
| else { | ||
| this.parent = window; | ||
| document.addEventListener('scroll', this.calcNavbarPosition, { passive: true }); | ||
| } | ||
| } | ||
| } | ||
| render() { | ||
| return (h(Host, null, h("slot", null))); | ||
| } | ||
| get host() { return getElement(this); } | ||
| componentDidLoad() { | ||
| this.navCss = window.getComputedStyle(this.host); | ||
| this.host.style.setProperty('--nav-position', 'sticky'); // apply css variable | ||
| if (this.autoHide) { | ||
| let seekScrollableParent = (el) => { | ||
| if (el) { | ||
| if (el.scrollHeight > el.clientHeight && 'hidden' !== window.getComputedStyle(el).overflowY) { | ||
| return el; | ||
| } | ||
| else { | ||
| return seekScrollableParent(el.parentElement); | ||
| } | ||
| } | ||
| else { | ||
| return el; | ||
| } | ||
| }; | ||
| let scrollableParent = seekScrollableParent(this.host.parentElement); | ||
| if (scrollableParent && scrollableParent.tagName.toLowerCase() !== 'html') { | ||
| this.offsetProp = 'scrollTop'; | ||
| this.parent = scrollableParent; | ||
| this.parent.addEventListener('scroll', this.calcNavbarPosition, { passive: true }); | ||
| } | ||
| else { | ||
| this.parent = window; | ||
| document.addEventListener('scroll', this.calcNavbarPosition, { passive: true }); | ||
| } | ||
| } | ||
| } | ||
| render() { | ||
| return (h(Host, { key: '00e45c411ec831a66dd29d039568f57fc97b3930' }, h("slot", { key: '844be28b7e12419c0cf5dae28db5e3db313a4004' }))); | ||
| } | ||
| get host() { return getElement(this); } | ||
| }; | ||
| SuiNav.style = suiNavCss; | ||
| SuiNav.style = SuiNavStyle0; | ||
| const eventList = [ | ||
| // 'abort' | ||
| // , | ||
| // 'animationend' | ||
| // , | ||
| // 'animationiteration' | ||
| // , | ||
| // 'animationstart' | ||
| // , | ||
| // 'auxclick' | ||
| // , | ||
| 'beforecopy', | ||
| 'beforecut', | ||
| 'beforeinput', | ||
| // 'beforematch' | ||
| // , | ||
| 'beforepaste', | ||
| // 'beforexrselect' | ||
| // , | ||
| 'blur', | ||
| // 'cancel' | ||
| // , | ||
| // 'canplay' | ||
| // , | ||
| // 'canplaythrough' | ||
| // , | ||
| 'change', | ||
| 'click', | ||
| // 'close' | ||
| // , | ||
| 'contextlost', | ||
| 'contextmenu', | ||
| 'contextrestored', | ||
| 'copy', | ||
| // 'cuechange' | ||
| // , | ||
| 'cut', | ||
| 'dblclick', | ||
| 'drag', | ||
| 'dragend', | ||
| 'dragenter', | ||
| 'dragleave', | ||
| 'dragover', | ||
| 'dragstart', | ||
| 'drop', | ||
| // 'durationchange' | ||
| // , | ||
| // 'emptied' | ||
| // , | ||
| // 'ended' | ||
| // , | ||
| // 'error' | ||
| // , | ||
| 'focus', | ||
| // 'formdata' | ||
| // , | ||
| // 'fullscreenchange' | ||
| // , | ||
| // 'fullscreenerror' | ||
| // , | ||
| // 'gotpointercapture' | ||
| // , | ||
| 'input', | ||
| 'invalid', | ||
| 'keydown', | ||
| 'keypress', | ||
| 'keyup', | ||
| // 'load' | ||
| // , | ||
| // 'loadeddata' | ||
| // , | ||
| // 'loadedmetadata' | ||
| // , | ||
| // 'loadstart' | ||
| // , | ||
| // 'lostpointercapture' | ||
| // , | ||
| 'mousedown', | ||
| // 'mouseenter' | ||
| // , | ||
| // 'mouseleave' | ||
| // , | ||
| 'mousemove', | ||
| 'mouseout', | ||
| 'mouseover', | ||
| 'mouseup', | ||
| 'mousewheel', | ||
| 'paste', | ||
| // 'pause' | ||
| // , | ||
| // 'play' | ||
| // , | ||
| // 'playing' | ||
| // , | ||
| // 'pointercancel' | ||
| // , | ||
| // 'pointerdown' | ||
| // , | ||
| // 'pointerenter' | ||
| // , | ||
| // 'pointerleave' | ||
| // , | ||
| // 'pointermove' | ||
| // , | ||
| // 'pointerout' | ||
| // , | ||
| // 'pointerover' | ||
| // , | ||
| // 'pointerrawupdate' | ||
| // , | ||
| // 'pointerup' | ||
| // , | ||
| // 'progress' | ||
| // , | ||
| // 'ratechange' | ||
| // , | ||
| 'reset', | ||
| // 'resize' | ||
| // , | ||
| // 'scroll' | ||
| // , | ||
| 'search', | ||
| // 'securitypolicyviolation' | ||
| // , | ||
| // 'seeked' | ||
| // , | ||
| // 'seeking' | ||
| // , | ||
| 'select', | ||
| // 'selectionchange' | ||
| // , | ||
| // 'selectstart' | ||
| // , | ||
| // 'slotchange' | ||
| // , | ||
| // 'stalled' | ||
| // , | ||
| 'submit', | ||
| // 'suspend' | ||
| // , | ||
| // 'timeupdate' | ||
| // , | ||
| // 'toggle' | ||
| // , | ||
| // 'transitioncancel' | ||
| // , | ||
| // 'transitionend' | ||
| // , | ||
| // 'transitionrun' | ||
| // , | ||
| // 'transitionstart' | ||
| // , | ||
| // 'volumechange' | ||
| // , | ||
| // 'waiting' | ||
| // , | ||
| // 'webkitanimationend' | ||
| // , | ||
| // 'webkitanimationiteration' | ||
| // , | ||
| // 'webkitanimationstart' | ||
| // , | ||
| // 'webkitfullscreenchange' | ||
| // , | ||
| // 'webkitfullscreenerror' | ||
| // , | ||
| // 'webkittransitionend' | ||
| // , | ||
| 'wheel' | ||
| // 'abort' | ||
| // , | ||
| // 'animationend' | ||
| // , | ||
| // 'animationiteration' | ||
| // , | ||
| // 'animationstart' | ||
| // , | ||
| // 'auxclick' | ||
| // , | ||
| 'beforecopy', | ||
| 'beforecut', | ||
| 'beforeinput', | ||
| // 'beforematch' | ||
| // , | ||
| 'beforepaste', | ||
| // 'beforexrselect' | ||
| // , | ||
| 'blur', | ||
| // 'cancel' | ||
| // , | ||
| // 'canplay' | ||
| // , | ||
| // 'canplaythrough' | ||
| // , | ||
| 'change', | ||
| 'click', | ||
| // 'close' | ||
| // , | ||
| 'contextlost', | ||
| 'contextmenu', | ||
| 'contextrestored', | ||
| 'copy', | ||
| // 'cuechange' | ||
| // , | ||
| 'cut', | ||
| 'dblclick', | ||
| 'drag', | ||
| 'dragend', | ||
| 'dragenter', | ||
| 'dragleave', | ||
| 'dragover', | ||
| 'dragstart', | ||
| 'drop', | ||
| // 'durationchange' | ||
| // , | ||
| // 'emptied' | ||
| // , | ||
| // 'ended' | ||
| // , | ||
| // 'error' | ||
| // , | ||
| 'focus', | ||
| // 'formdata' | ||
| // , | ||
| // 'fullscreenchange' | ||
| // , | ||
| // 'fullscreenerror' | ||
| // , | ||
| // 'gotpointercapture' | ||
| // , | ||
| 'input', | ||
| 'invalid', | ||
| 'keydown', | ||
| 'keypress', | ||
| 'keyup', | ||
| // 'load' | ||
| // , | ||
| // 'loadeddata' | ||
| // , | ||
| // 'loadedmetadata' | ||
| // , | ||
| // 'loadstart' | ||
| // , | ||
| // 'lostpointercapture' | ||
| // , | ||
| 'mousedown', | ||
| // 'mouseenter' | ||
| // , | ||
| // 'mouseleave' | ||
| // , | ||
| 'mousemove', | ||
| 'mouseout', | ||
| 'mouseover', | ||
| 'mouseup', | ||
| 'mousewheel', | ||
| 'paste', | ||
| // 'pause' | ||
| // , | ||
| // 'play' | ||
| // , | ||
| // 'playing' | ||
| // , | ||
| // 'pointercancel' | ||
| // , | ||
| // 'pointerdown' | ||
| // , | ||
| // 'pointerenter' | ||
| // , | ||
| // 'pointerleave' | ||
| // , | ||
| // 'pointermove' | ||
| // , | ||
| // 'pointerout' | ||
| // , | ||
| // 'pointerover' | ||
| // , | ||
| // 'pointerrawupdate' | ||
| // , | ||
| // 'pointerup' | ||
| // , | ||
| // 'progress' | ||
| // , | ||
| // 'ratechange' | ||
| // , | ||
| 'reset', | ||
| // 'resize' | ||
| // , | ||
| // 'scroll' | ||
| // , | ||
| 'search', | ||
| // 'securitypolicyviolation' | ||
| // , | ||
| // 'seeked' | ||
| // , | ||
| // 'seeking' | ||
| // , | ||
| 'select', | ||
| // 'selectionchange' | ||
| // , | ||
| // 'selectstart' | ||
| // , | ||
| // 'slotchange' | ||
| // , | ||
| // 'stalled' | ||
| // , | ||
| 'submit', | ||
| // 'suspend' | ||
| // , | ||
| // 'timeupdate' | ||
| // , | ||
| // 'toggle' | ||
| // , | ||
| // 'transitioncancel' | ||
| // , | ||
| // 'transitionend' | ||
| // , | ||
| // 'transitionrun' | ||
| // , | ||
| // 'transitionstart' | ||
| // , | ||
| // 'volumechange' | ||
| // , | ||
| // 'waiting' | ||
| // , | ||
| // 'webkitanimationend' | ||
| // , | ||
| // 'webkitanimationiteration' | ||
| // , | ||
| // 'webkitanimationstart' | ||
| // , | ||
| // 'webkitfullscreenchange' | ||
| // , | ||
| // 'webkitfullscreenerror' | ||
| // , | ||
| // 'webkittransitionend' | ||
| // , | ||
| 'wheel' | ||
| ]; | ||
| function cloneEvents(el, options) { | ||
| // clone events to another element | ||
| // callback | ||
| let { dispatchTo, eventCallback = null, bypass = [] } = options || {}; | ||
| let cb = (ev) => { | ||
| let new_ev = new Event(ev.type); | ||
| if (eventCallback && eventCallback.type === ev.type && typeof eventCallback.callback === 'function') { | ||
| eventCallback.callback(new_ev); | ||
| // clone events to another element | ||
| // callback | ||
| let { dispatchTo, eventCallback = null, bypass = [] } = options || {}; | ||
| let cb = (ev) => { | ||
| let new_ev = new Event(ev.type); | ||
| if (eventCallback && eventCallback.type === ev.type && typeof eventCallback.callback === 'function') { | ||
| eventCallback.callback(new_ev); | ||
| } | ||
| dispatchTo.dispatchEvent(new_ev); | ||
| }; | ||
| for (let name of eventList) { | ||
| if (!bypass.includes(name)) { | ||
| el.addEventListener(name, cb, { passive: name.includes('scroll') || name.includes('wheel') }); | ||
| } | ||
| } | ||
| dispatchTo.dispatchEvent(new_ev); | ||
| }; | ||
| for (let name of eventList) { | ||
| if (!bypass.includes(name)) { | ||
| el.addEventListener(name, cb, { passive: name.includes('scroll') || name.includes('wheel') }); | ||
| } | ||
| } | ||
| } | ||
| function getElementAttributes(nodeMap) { | ||
| if (nodeMap) { | ||
| const length = nodeMap.length; | ||
| return Object.keys(nodeMap).reduce((props, current) => { | ||
| try { | ||
| const numCurrent = parseInt(current); | ||
| if (numCurrent <= length) { | ||
| const property = nodeMap[current]; | ||
| return Object.assign(Object.assign({}, props), { [property.name]: property.value }); | ||
| } | ||
| } | ||
| catch (err) { } | ||
| }, {}); | ||
| } | ||
| return {}; | ||
| if (nodeMap) { | ||
| const length = nodeMap.length; | ||
| return Object.keys(nodeMap).reduce((props, current) => { | ||
| try { | ||
| const numCurrent = parseInt(current); | ||
| if (numCurrent <= length) { | ||
| const property = nodeMap[current]; | ||
| return Object.assign(Object.assign({}, props), { [property.name]: property.value }); | ||
| } | ||
| } | ||
| catch (err) { } | ||
| }, {}); | ||
| } | ||
| return {}; | ||
| } | ||
| function randomString(length = 5) { | ||
| // set random slot name to prevent users adding elements to the slot | ||
| let result = ''; | ||
| let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; | ||
| let charactersLength = characters.length; | ||
| for (let i = 0; i < length; i++) { | ||
| result += characters.charAt(Math.floor(Math.random() * charactersLength)); | ||
| } | ||
| return result; | ||
| // set random slot name to prevent users adding elements to the slot | ||
| let result = ''; | ||
| let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; | ||
| let charactersLength = characters.length; | ||
| for (let i = 0; i < length; i++) { | ||
| result += characters.charAt(Math.floor(Math.random() * charactersLength)); | ||
| } | ||
| return result; | ||
| } | ||
@@ -413,547 +419,549 @@ /** | ||
| function dummyHandler(options = {}) { | ||
| const { excludeStyle = [], excludeAttribute = [], trackNodes = false, log = false, mirrorStyle = null, moveIdToSlotElement = false, excludeEvents = [], bounceEvents = false, mirrorEvents = false } = options || {}; | ||
| excludeStyle.push(...['display', 'position', 'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height', 'font', 'box-sizing']); | ||
| const initEvents = () => { | ||
| if (mirrorEvents) { | ||
| // dispatch the host event to hidden this.el | ||
| let iter = (Array.isArray(mirrorEvents) && mirrorEvents.length ? mirrorEvents : eventList); | ||
| for (let name of iter) { | ||
| let cb; | ||
| if (typeof mirrorEvents === 'object' && Object.keys(mirrorEvents).length && !Array.isArray(mirrorEvents) && mirrorEvents.hasOwnProperty(name) && typeof mirrorEvents[name] === 'function') { | ||
| cb = mirrorEvents[name]; | ||
| const { excludeStyle = [], excludeAttribute = [], trackNodes = false, log = false, mirrorStyle = null, moveIdToSlotElement = false, excludeEvents = [], bounceEvents = false, mirrorEvents = false } = options || {}; | ||
| excludeStyle.push(...['display', 'position', 'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height', 'font', 'box-sizing']); | ||
| const initEvents = () => { | ||
| if (mirrorEvents) { | ||
| // dispatch the host event to hidden this.el | ||
| let iter = (Array.isArray(mirrorEvents) && mirrorEvents.length ? mirrorEvents : eventList); | ||
| for (let name of iter) { | ||
| let cb; | ||
| if (typeof mirrorEvents === 'object' && Object.keys(mirrorEvents).length && !Array.isArray(mirrorEvents) && mirrorEvents.hasOwnProperty(name) && typeof mirrorEvents[name] === 'function') { | ||
| cb = mirrorEvents[name]; | ||
| } | ||
| if (!excludeEvents.includes(name)) { | ||
| cb = cb || typeof mirrorEvents === 'function' ? mirrorEvents : (e) => { | ||
| this.el.dispatchEvent(new Event(e.type, { | ||
| bubbles: false | ||
| })); | ||
| }; | ||
| this.host.addEventListener(name, cb, { passive: name.includes('scroll') || name.includes('wheel') }); | ||
| } | ||
| } | ||
| } | ||
| if (!excludeEvents.includes(name)) { | ||
| cb = cb || typeof mirrorEvents === 'function' ? mirrorEvents : (e) => { | ||
| this.el.dispatchEvent(new Event(e.type, { | ||
| bubbles: false | ||
| })); | ||
| }; | ||
| this.host.addEventListener(name, cb, { passive: name.includes('scroll') || name.includes('wheel') }); | ||
| if (bounceEvents) { | ||
| // dispatch the host event to hidden this.el | ||
| let iter = (Array.isArray(bounceEvents) && bounceEvents.length ? bounceEvents : eventList); | ||
| for (let name of iter) { | ||
| let cb; | ||
| if (typeof bounceEvents === 'object' && Object.keys(bounceEvents).length && !Array.isArray(bounceEvents) && bounceEvents.hasOwnProperty(name) && typeof bounceEvents[name] === 'function') { | ||
| cb = bounceEvents[name]; | ||
| } | ||
| cb = cb || typeof bounceEvents === 'function' ? bounceEvents : (e) => { | ||
| if (!e.bubbles) { | ||
| this.host.dispatchEvent(new Event(e.type, { | ||
| bubbles: true | ||
| })); | ||
| } | ||
| }; | ||
| this.el.addEventListener(name, cb); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| if (bounceEvents) { | ||
| // dispatch the host event to hidden this.el | ||
| let iter = (Array.isArray(bounceEvents) && bounceEvents.length ? bounceEvents : eventList); | ||
| for (let name of iter) { | ||
| let cb; | ||
| if (typeof bounceEvents === 'object' && Object.keys(bounceEvents).length && !Array.isArray(bounceEvents) && bounceEvents.hasOwnProperty(name) && typeof bounceEvents[name] === 'function') { | ||
| cb = bounceEvents[name]; | ||
| }; | ||
| const setDummyAttribute = (attName, val) => { | ||
| if (attName !== 'hidden' && attName !== 'class' && attName !== 'id' && attName !== 'style' && !excludeAttribute.includes(attName)) { | ||
| // skip settings 'hidden' | 'class' | 'id' | excluded attribute list | ||
| this.el.setAttribute(attName, val); | ||
| } | ||
| cb = cb || typeof bounceEvents === 'function' ? bounceEvents : (e) => { | ||
| if (!e.bubbles) { | ||
| this.host.dispatchEvent(new Event(e.type, { | ||
| bubbles: true | ||
| })); | ||
| } | ||
| }; | ||
| this.el.addEventListener(name, cb); | ||
| } | ||
| } | ||
| }; | ||
| const setDummyAttribute = (attName, val) => { | ||
| if (attName !== 'hidden' && attName !== 'class' && attName !== 'id' && attName !== 'style' && !excludeAttribute.includes(attName)) { | ||
| // skip settings 'hidden' | 'class' | 'id' | excluded attribute list | ||
| this.el.setAttribute(attName, val); | ||
| } | ||
| if (mirrorStyle) { | ||
| const mirrorStyleBypass = []; | ||
| // mirror styling | ||
| if (attName === 'style' && mirrorStyle === true) { | ||
| let styleProps = val.split(';'); | ||
| for (let s of styleProps) { | ||
| if (!s) { | ||
| continue; | ||
| } | ||
| let keyVal = s.split(':'); | ||
| let val = keyVal[1].split('!'); | ||
| if (!excludeStyle.includes(keyVal[0]) && (() => { | ||
| // exclude related styles ex) border-xxxx | ||
| for (let e of excludeStyle) { | ||
| if (e.includes(keyVal[0] + '-')) { | ||
| return false; | ||
| } | ||
| if (mirrorStyle) { | ||
| const mirrorStyleBypass = []; | ||
| // mirror styling | ||
| if (attName === 'style' && mirrorStyle === true) { | ||
| let styleProps = val.split(';'); | ||
| for (let s of styleProps) { | ||
| if (!s) { | ||
| continue; | ||
| } | ||
| let keyVal = s.split(':'); | ||
| let val = keyVal[1].split('!'); | ||
| if (!excludeStyle.includes(keyVal[0]) && (() => { | ||
| // exclude related styles ex) border-xxxx | ||
| for (let e of excludeStyle) { | ||
| if (e.includes(keyVal[0] + '-')) { | ||
| return false; | ||
| } | ||
| } | ||
| return true; | ||
| })() && CSS.supports(keyVal[0], val[0])) { | ||
| this.el.style.setProperty(keyVal[0], val[0], val[1] || null); | ||
| if (Array.isArray(mirrorStyle) && mirrorStyle.includes(keyVal[0])) { | ||
| // add to style copy bypass list | ||
| mirrorStyleBypass.push(keyVal[0]); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return true; | ||
| })() && CSS.supports(keyVal[0], val[0])) { | ||
| this.el.style.setProperty(keyVal[0], val[0], val[1] || null); | ||
| if (Array.isArray(mirrorStyle) && mirrorStyle.includes(keyVal[0])) { | ||
| // add to style copy bypass list | ||
| mirrorStyleBypass.push(keyVal[0]); | ||
| let hostStyle = getComputedStyle(this.host); | ||
| if (typeof mirrorStyle === 'function') { | ||
| // callback | ||
| return mirrorStyle(hostStyle); | ||
| } | ||
| } | ||
| // copy css styles | ||
| for (let s of mirrorStyle) { | ||
| if (!mirrorStyleBypass.includes(s)) { | ||
| if (!excludeStyle.includes(s) && (() => { | ||
| // exclude related styles ex) border-xxxx | ||
| for (let e of excludeStyle) { | ||
| if (e.includes(s + '-')) { | ||
| return false; | ||
| } | ||
| } | ||
| return true; | ||
| })() && CSS.supports(s, hostStyle[s])) { | ||
| this.el.style.setProperty(s, hostStyle[s]); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| let hostStyle = getComputedStyle(this.host); | ||
| if (typeof mirrorStyle === 'function') { | ||
| // callback | ||
| return mirrorStyle(hostStyle); | ||
| } | ||
| // copy css styles | ||
| for (let s of mirrorStyle) { | ||
| if (!mirrorStyleBypass.includes(s)) { | ||
| if (!excludeStyle.includes(s) && (() => { | ||
| // exclude related styles ex) border-xxxx | ||
| for (let e of excludeStyle) { | ||
| if (e.includes(s + '-')) { | ||
| return false; | ||
| } | ||
| }; | ||
| const observe = () => { | ||
| this.observer = new MutationObserver((mutations) => { | ||
| let logger = (l) => { | ||
| if (!log) { | ||
| return; | ||
| } | ||
| if (typeof log === 'boolean') { | ||
| return console.log(l); | ||
| } | ||
| if (typeof log === 'function') { | ||
| return log(l); | ||
| } | ||
| }; | ||
| for (let m of mutations) { | ||
| let attributeName = m.attributeName; | ||
| if (!attributeName && trackNodes) { | ||
| if (typeof trackNodes === 'function') { | ||
| logger({ attributeName, mutationRecord: m }); | ||
| trackNodes(m); | ||
| } | ||
| continue; | ||
| } | ||
| let newValue = m.target.getAttribute(attributeName); | ||
| let oldValue = m.oldValue; | ||
| if (newValue === oldValue) { | ||
| // skip same values | ||
| continue; | ||
| } | ||
| logger({ attributeName, newValue, oldValue }); | ||
| // ! do not change the order of execution below ! | ||
| if (newValue === null) { | ||
| // attribute is removed | ||
| this.el.removeAttribute(attributeName); | ||
| continue; | ||
| } | ||
| setDummyAttribute(attributeName, newValue); | ||
| } | ||
| return true; | ||
| })() && CSS.supports(s, hostStyle[s])) { | ||
| this.el.style.setProperty(s, hostStyle[s]); | ||
| } | ||
| }); | ||
| this.observer.observe(this.host, { | ||
| attributes: true, | ||
| attributeOldValue: true, | ||
| childList: !!trackNodes | ||
| }); | ||
| }; | ||
| const init = (fullInit = false) => { | ||
| if (fullInit) { | ||
| initEvents(); | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| const observe = () => { | ||
| this.observer = new MutationObserver((mutations) => { | ||
| let logger = (l) => { | ||
| if (!log) { | ||
| return; | ||
| // attribute setup on load | ||
| const hostAttributes = getElementAttributes(this.host.attributes); | ||
| for (let attName in hostAttributes) { | ||
| if (attName.substring(0, 2) !== 'on') { | ||
| // skip onevent attributes | ||
| setDummyAttribute(attName, hostAttributes[attName]); | ||
| } | ||
| if (attName === 'id' && moveIdToSlotElement) { | ||
| // move id attribute to this.el if allowed | ||
| this.el.setAttribute(attName, hostAttributes[attName]); | ||
| this.host.removeAttribute(attName); | ||
| } | ||
| if (attName === 'autofocus') { | ||
| // auto focus on load | ||
| this.host.focus(); | ||
| } | ||
| } | ||
| if (typeof log === 'boolean') { | ||
| return console.log(l); | ||
| if (fullInit) { | ||
| observe(); | ||
| } | ||
| if (typeof log === 'function') { | ||
| return log(l); | ||
| } | ||
| }; | ||
| for (let m of mutations) { | ||
| let attributeName = m.attributeName; | ||
| if (!attributeName && trackNodes) { | ||
| if (typeof trackNodes === 'function') { | ||
| logger({ attributeName, mutationRecord: m }); | ||
| trackNodes(m); | ||
| } | ||
| continue; | ||
| } | ||
| let newValue = m.target.getAttribute(attributeName); | ||
| let oldValue = m.oldValue; | ||
| if (newValue === oldValue) { | ||
| // skip same values | ||
| continue; | ||
| } | ||
| logger({ attributeName, newValue, oldValue }); | ||
| // ! do not change the order of execution below ! | ||
| if (newValue === null) { | ||
| // attribute is removed | ||
| this.el.removeAttribute(attributeName); | ||
| continue; | ||
| } | ||
| setDummyAttribute(attributeName, newValue); | ||
| } | ||
| }); | ||
| this.observer.observe(this.host, { | ||
| attributes: true, | ||
| attributeOldValue: true, | ||
| childList: !!trackNodes | ||
| }); | ||
| }; | ||
| const init = (fullInit = false) => { | ||
| if (fullInit) { | ||
| initEvents(); | ||
| } | ||
| // attribute setup on load | ||
| const hostAttributes = getElementAttributes(this.host.attributes); | ||
| for (let attName in hostAttributes) { | ||
| if (attName.substring(0, 2) !== 'on') { | ||
| // skip onevent attributes | ||
| setDummyAttribute(attName, hostAttributes[attName]); | ||
| } | ||
| if (attName === 'id' && moveIdToSlotElement) { | ||
| // move id attribute to this.el if allowed | ||
| this.el.setAttribute(attName, hostAttributes[attName]); | ||
| this.host.removeAttribute(attName); | ||
| } | ||
| if (attName === 'autofocus') { | ||
| // auto focus on load | ||
| this.host.focus(); | ||
| } | ||
| } | ||
| if (fullInit) { | ||
| observe(); | ||
| } | ||
| }; | ||
| init(true); | ||
| return { init }; | ||
| }; | ||
| init(true); | ||
| return { init }; | ||
| } | ||
| const suiOverlayCss = ":host{display:none !important}"; | ||
| const SuiOverlayStyle0 = suiOverlayCss; | ||
| const SuiOverlay = class { | ||
| constructor(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| this.overlayId = null; | ||
| this.position = 'center'; | ||
| this.transitionTime = '0.25s'; | ||
| } | ||
| componentWillLoad() { | ||
| const allowed_positions = [ | ||
| 'center', | ||
| 'right', | ||
| 'left', | ||
| 'right', | ||
| 'bottom', | ||
| 'top' | ||
| ]; | ||
| if (!allowed_positions.includes(this.position)) { | ||
| this.position = 'center'; | ||
| constructor(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| this.overlayId = null; | ||
| this.position = 'center'; | ||
| this.transitionTime = '0.25s'; | ||
| } | ||
| } | ||
| createScreen() { | ||
| const css = { | ||
| base: { | ||
| 'z-index': '9999', | ||
| display: 'flex', | ||
| position: 'fixed', | ||
| 'flex-direction': 'column', | ||
| top: '0', | ||
| right: '0', | ||
| bottom: '0', | ||
| left: '0', | ||
| 'background-color': 'transparent', | ||
| 'overflow': 'hidden', | ||
| 'transition': `background-color ${this.transitionTime} ease-out` | ||
| }, | ||
| center: { | ||
| 'justify-content': 'center' | ||
| }, | ||
| top: { | ||
| 'justify-content': 'flex-start' | ||
| }, | ||
| bottom: { | ||
| 'justify-content': 'flex-end' | ||
| }, | ||
| right: { | ||
| 'justify-content': 'center', | ||
| 'align-items': 'flex-end' | ||
| }, | ||
| left: { | ||
| 'justify-content': 'center', | ||
| 'align-items': 'flex-start' | ||
| } | ||
| }; | ||
| const screen = document.createElement('div'); | ||
| for (let k in css.base) { | ||
| // append base css | ||
| screen.style.setProperty(k, css.base[k]); | ||
| componentWillLoad() { | ||
| const allowed_positions = [ | ||
| 'center', | ||
| 'right', | ||
| 'left', | ||
| 'right', | ||
| 'bottom', | ||
| 'top' | ||
| ]; | ||
| if (!allowed_positions.includes(this.position)) { | ||
| this.position = 'center'; | ||
| } | ||
| } | ||
| if (!css[this.position]) { | ||
| this.position = 'center'; | ||
| } | ||
| for (let k in css[this.position]) { | ||
| // append positioning css | ||
| screen.style.setProperty(k, css[this.position][k]); | ||
| } | ||
| cloneEvents(screen, { dispatchTo: this.host }); | ||
| // generate overlay id | ||
| this.overlayId = randomString(); | ||
| screen.id = this.overlayId; | ||
| return screen; | ||
| } | ||
| async close(cb = () => null) { | ||
| if (!this.overlayId) { | ||
| // no overlay to close | ||
| return; | ||
| } | ||
| const screen = document.getElementById(this.overlayId); | ||
| if (!screen) { | ||
| return; | ||
| } | ||
| const el = screen.firstChild; | ||
| let revert = { | ||
| bottom: { | ||
| 'bottom': 'calc(var(--overlay-height) * -1)' | ||
| }, | ||
| top: { | ||
| 'bottom': 'var(--overlay-height)' | ||
| }, | ||
| right: { | ||
| 'left': 'var(--overlay-width)' | ||
| }, | ||
| left: { | ||
| 'left': 'calc(var(--overlay-width) * -1)' | ||
| }, | ||
| center: { | ||
| 'opacity': '0' | ||
| } | ||
| }; | ||
| for (let k in revert[this.position]) { | ||
| el.style.setProperty(k, revert[this.position][k]); | ||
| } | ||
| screen.style.setProperty('background-color', 'transparent'); | ||
| let wait = 0; | ||
| if (this.transitionTime.includes('ms')) { | ||
| wait = Number(this.transitionTime.split(',')[0].replace('ms', '')); | ||
| } | ||
| else if (this.transitionTime.includes('s')) { | ||
| wait = parseFloat(this.transitionTime.split(',')[0].replace('s', '')) * 1000; | ||
| } | ||
| let removeEl = () => { | ||
| if (el.children.length) { | ||
| let len = el.children.length; | ||
| while (len--) { | ||
| this.host.prepend(el.children[len]); | ||
| createScreen() { | ||
| const css = { | ||
| base: { | ||
| 'z-index': '9999', | ||
| display: 'flex', | ||
| position: 'fixed', | ||
| 'flex-direction': 'column', | ||
| top: '0', | ||
| right: '0', | ||
| bottom: '0', | ||
| left: '0', | ||
| 'background-color': 'transparent', | ||
| 'overflow': 'hidden', | ||
| 'transition': `background-color ${this.transitionTime} ease-out` | ||
| }, | ||
| center: { | ||
| 'justify-content': 'center' | ||
| }, | ||
| top: { | ||
| 'justify-content': 'flex-start' | ||
| }, | ||
| bottom: { | ||
| 'justify-content': 'flex-end' | ||
| }, | ||
| right: { | ||
| 'justify-content': 'center', | ||
| 'align-items': 'flex-end' | ||
| }, | ||
| left: { | ||
| 'justify-content': 'center', | ||
| 'align-items': 'flex-start' | ||
| } | ||
| }; | ||
| const screen = document.createElement('div'); | ||
| for (let k in css.base) { | ||
| // append base css | ||
| screen.style.setProperty(k, css.base[k]); | ||
| } | ||
| } | ||
| }; | ||
| if (wait) { | ||
| setTimeout(() => { | ||
| removeEl(); | ||
| if (screen) { | ||
| screen.remove(); | ||
| if (!css[this.position]) { | ||
| this.position = 'center'; | ||
| } | ||
| cb(); | ||
| }, wait); | ||
| for (let k in css[this.position]) { | ||
| // append positioning css | ||
| screen.style.setProperty(k, css[this.position][k]); | ||
| } | ||
| cloneEvents(screen, { dispatchTo: this.host }); | ||
| // generate overlay id | ||
| this.overlayId = randomString(); | ||
| screen.id = this.overlayId; | ||
| return screen; | ||
| } | ||
| else { | ||
| // close popup | ||
| removeEl(); | ||
| if (screen) { | ||
| screen.remove(); | ||
| } | ||
| } | ||
| this.overlayId = null; | ||
| } | ||
| open(cb = () => null) { | ||
| return new Promise(res => { | ||
| if (this.overlayId) { | ||
| // overlay is already up | ||
| return; | ||
| } | ||
| // create overlay | ||
| const screen = this.createScreen(); | ||
| const el = document.createElement('div'); | ||
| if (this.host.children.length) { | ||
| let len = this.host.children.length; | ||
| while (len--) { | ||
| let child = this.host.children[len]; | ||
| el.prepend(child); | ||
| async close(cb = () => null) { | ||
| if (!this.overlayId) { | ||
| // no overlay to close | ||
| return; | ||
| } | ||
| } | ||
| for (let ev of eventList) { | ||
| el.addEventListener(ev, e => { | ||
| e.stopPropagation(); | ||
| }); | ||
| } | ||
| const css = { | ||
| base: { | ||
| // 'overflow-y': 'auto', | ||
| // 'overflow-x': 'auto', | ||
| 'opacity': '0', | ||
| 'display': 'block', | ||
| 'position': 'relative', | ||
| 'max-height': '100vh', | ||
| 'max-width': '100vw', | ||
| 'pointer-events': 'auto' | ||
| }, | ||
| bottom: { | ||
| 'border-bottom-left-radius': '0', | ||
| 'border-bottom-right-radius': '0', | ||
| 'bottom': 'calc(var(--overlay-height) * -1)', | ||
| 'margin': '0 auto', | ||
| 'transition': `bottom ${this.transitionTime} ease-out` | ||
| }, | ||
| top: { | ||
| 'border-top-left-radius': '0', | ||
| 'border-top-right-radius': '0', | ||
| 'bottom': 'var(--overlay-height)', | ||
| 'margin': '0 auto', | ||
| 'transition': `bottom ${this.transitionTime} ease-out` | ||
| }, | ||
| right: { | ||
| 'border-top-right-radius': '0', | ||
| 'border-bottom-right-radius': '0', | ||
| 'left': 'var(--overlay-width)', | ||
| 'margin': '0', | ||
| 'transition': `left ${this.transitionTime} ease-out` | ||
| }, | ||
| left: { | ||
| 'border-top-left-radius': '0', | ||
| 'border-bottom-left-radius': '0', | ||
| 'left': 'calc(var(--overlay-width) * -1)', | ||
| 'margin': '0', | ||
| 'transition': `left ${this.transitionTime} ease-out` | ||
| }, | ||
| center: { | ||
| 'margin': 'auto', | ||
| 'transition': `opacity ${this.transitionTime}` | ||
| const screen = document.getElementById(this.overlayId); | ||
| if (!screen) { | ||
| return; | ||
| } | ||
| }; | ||
| for (let k in css.base) { | ||
| el.style.setProperty(k, css.base[k]); | ||
| } | ||
| for (let k in css[this.position]) { | ||
| el.style.setProperty(k, css[this.position][k]); | ||
| } | ||
| screen.append(el); | ||
| document.body.append(screen); | ||
| el.style.setProperty('--overlay-width', window.getComputedStyle(el).width); | ||
| el.style.setProperty('--overlay-height', window.getComputedStyle(el).height); | ||
| el.style.setProperty('opacity', '1'); | ||
| window.requestAnimationFrame(() => { | ||
| const matchByPosition = { | ||
| 'center': 'center', | ||
| 'bottom': 'up', | ||
| 'top': 'down', | ||
| 'right': 'left', | ||
| 'left': 'right' | ||
| const el = screen.firstChild; | ||
| let revert = { | ||
| bottom: { | ||
| 'bottom': 'calc(var(--overlay-height) * -1)' | ||
| }, | ||
| top: { | ||
| 'bottom': 'var(--overlay-height)' | ||
| }, | ||
| right: { | ||
| 'left': 'var(--overlay-width)' | ||
| }, | ||
| left: { | ||
| 'left': 'calc(var(--overlay-width) * -1)' | ||
| }, | ||
| center: { | ||
| 'opacity': '0' | ||
| } | ||
| }; | ||
| let popDirection = matchByPosition[this.position]; | ||
| screen.style.setProperty('background-color', this.host.style.getPropertyValue('background-color')); | ||
| screen.style.setProperty('color', this.host.style.getPropertyValue('color')); | ||
| if (popDirection === 'up' || popDirection === 'down') { | ||
| el.style.setProperty('bottom', '0'); | ||
| for (let k in revert[this.position]) { | ||
| el.style.setProperty(k, revert[this.position][k]); | ||
| } | ||
| else if (popDirection === 'left' || popDirection === 'right') { | ||
| el.style.setProperty('left', '0'); | ||
| screen.style.setProperty('background-color', 'transparent'); | ||
| let wait = 0; | ||
| if (this.transitionTime.includes('ms')) { | ||
| wait = Number(this.transitionTime.split(',')[0].replace('ms', '')); | ||
| } | ||
| res(cb()); | ||
| }); | ||
| }); | ||
| } | ||
| disconnectedCallback() { | ||
| this.close(); | ||
| } | ||
| render() { | ||
| return (h(Host, { hidden: true, style: { display: this.overlayId ? null : 'none' } }, h("slot", null))); | ||
| } | ||
| get host() { return getElement(this); } | ||
| else if (this.transitionTime.includes('s')) { | ||
| wait = parseFloat(this.transitionTime.split(',')[0].replace('s', '')) * 1000; | ||
| } | ||
| let removeEl = () => { | ||
| if (el.children.length) { | ||
| let len = el.children.length; | ||
| while (len--) { | ||
| this.host.prepend(el.children[len]); | ||
| } | ||
| } | ||
| }; | ||
| if (wait) { | ||
| setTimeout(() => { | ||
| removeEl(); | ||
| if (screen) { | ||
| screen.remove(); | ||
| } | ||
| cb(); | ||
| }, wait); | ||
| } | ||
| else { | ||
| // close popup | ||
| removeEl(); | ||
| if (screen) { | ||
| screen.remove(); | ||
| } | ||
| } | ||
| this.overlayId = null; | ||
| } | ||
| open(cb = () => null) { | ||
| return new Promise(res => { | ||
| if (this.overlayId) { | ||
| // overlay is already up | ||
| return; | ||
| } | ||
| // create overlay | ||
| const screen = this.createScreen(); | ||
| const el = document.createElement('div'); | ||
| if (this.host.children.length) { | ||
| let len = this.host.children.length; | ||
| while (len--) { | ||
| let child = this.host.children[len]; | ||
| el.prepend(child); | ||
| } | ||
| } | ||
| for (let ev of eventList) { | ||
| el.addEventListener(ev, e => { | ||
| e.stopPropagation(); | ||
| }); | ||
| } | ||
| const css = { | ||
| base: { | ||
| // 'overflow-y': 'auto', | ||
| // 'overflow-x': 'auto', | ||
| 'opacity': '0', | ||
| 'display': 'block', | ||
| 'position': 'relative', | ||
| 'max-height': '100vh', | ||
| 'max-width': '100vw', | ||
| 'pointer-events': 'auto' | ||
| }, | ||
| bottom: { | ||
| 'border-bottom-left-radius': '0', | ||
| 'border-bottom-right-radius': '0', | ||
| 'bottom': 'calc(var(--overlay-height) * -1)', | ||
| 'margin': '0 auto', | ||
| 'transition': `bottom ${this.transitionTime} ease-out` | ||
| }, | ||
| top: { | ||
| 'border-top-left-radius': '0', | ||
| 'border-top-right-radius': '0', | ||
| 'bottom': 'var(--overlay-height)', | ||
| 'margin': '0 auto', | ||
| 'transition': `bottom ${this.transitionTime} ease-out` | ||
| }, | ||
| right: { | ||
| 'border-top-right-radius': '0', | ||
| 'border-bottom-right-radius': '0', | ||
| 'left': 'var(--overlay-width)', | ||
| 'margin': '0', | ||
| 'transition': `left ${this.transitionTime} ease-out` | ||
| }, | ||
| left: { | ||
| 'border-top-left-radius': '0', | ||
| 'border-bottom-left-radius': '0', | ||
| 'left': 'calc(var(--overlay-width) * -1)', | ||
| 'margin': '0', | ||
| 'transition': `left ${this.transitionTime} ease-out` | ||
| }, | ||
| center: { | ||
| 'margin': 'auto', | ||
| 'transition': `opacity ${this.transitionTime}` | ||
| } | ||
| }; | ||
| for (let k in css.base) { | ||
| el.style.setProperty(k, css.base[k]); | ||
| } | ||
| for (let k in css[this.position]) { | ||
| el.style.setProperty(k, css[this.position][k]); | ||
| } | ||
| screen.append(el); | ||
| document.body.append(screen); | ||
| el.style.setProperty('--overlay-width', window.getComputedStyle(el).width); | ||
| el.style.setProperty('--overlay-height', window.getComputedStyle(el).height); | ||
| el.style.setProperty('opacity', '1'); | ||
| window.requestAnimationFrame(() => { | ||
| const matchByPosition = { | ||
| 'center': 'center', | ||
| 'bottom': 'up', | ||
| 'top': 'down', | ||
| 'right': 'left', | ||
| 'left': 'right' | ||
| }; | ||
| let popDirection = matchByPosition[this.position]; | ||
| screen.style.setProperty('background-color', this.host.style.getPropertyValue('background-color')); | ||
| screen.style.setProperty('color', this.host.style.getPropertyValue('color')); | ||
| if (popDirection === 'up' || popDirection === 'down') { | ||
| el.style.setProperty('bottom', '0'); | ||
| } | ||
| else if (popDirection === 'left' || popDirection === 'right') { | ||
| el.style.setProperty('left', '0'); | ||
| } | ||
| res(cb()); | ||
| }); | ||
| }); | ||
| } | ||
| disconnectedCallback() { | ||
| this.close(); | ||
| } | ||
| render() { | ||
| return (h(Host, { key: '27d73bd29473f8dd2ded1484f5dbcb4618b01743', hidden: true, style: { display: this.overlayId ? null : 'none' } }, h("slot", { key: '5d209b869b76d1f48b05018ceed622b217eed036' }))); | ||
| } | ||
| get host() { return getElement(this); } | ||
| }; | ||
| SuiOverlay.style = suiOverlayCss; | ||
| SuiOverlay.style = SuiOverlayStyle0; | ||
| const suiTextareaCss = ":host{height:auto;display:inline-block;vertical-align:top;position:relative;max-width:100%;padding:0.6em 0.66em;min-width:1em;width:12em;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.5);overflow-y:auto;white-space:pre-wrap;word-break:break-word;line-height:1.33}.shell{display:grid;position:relative;width:100%;height:100%}.shell>.text-value{display:block;width:100%;min-height:1em;white-space:inherit;word-break:inherit;font-size:inherit;line-height:inherit;font-family:inherit;font-weight:inherit}.shell>.text-value>div{display:none}.shell>.text-value::before{content:attr(text-value);display:block;white-space:inherit;word-break:inherit;color:inherit}::slotted([slot]){position:absolute;resize:none;overflow:hidden;border:none;outline:none;background-color:transparent;color:inherit;display:block;inset:0;padding:0;margin:0;width:100%;min-height:1em;grid-area:1/1/2/2;height:100%}:host(:focus-within){box-shadow:inset 0 0 0 1px rgba(0,0,0,0.5), 0 0 0 1px currentColor}:host([disabled]){box-shadow:none;background-color:hsla(0deg, 0%, 50%, 0.33);filter:grayscale(1)}"; | ||
| const SuiTextareaStyle0 = suiTextareaCss; | ||
| const SuiTextarea = class { | ||
| constructor(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| this.slotName = randomString(); | ||
| this.value = ''; | ||
| this.disabled = undefined; | ||
| this.textValue = ''; | ||
| this.el = (() => { | ||
| let value = this.value ? this.value.toString() : ''; | ||
| // create new element | ||
| const textarea = document.createElement('textarea'); | ||
| if (value) { | ||
| textarea.value = value; | ||
| } | ||
| textarea.setAttribute('slot', this.slotName); | ||
| textarea.addEventListener('input', e => { | ||
| this.value = e.target.value; | ||
| }); | ||
| for (let key of [ | ||
| 'font-size', | ||
| 'line-height', | ||
| 'font-family', | ||
| 'font-weight', | ||
| 'white-space', | ||
| 'word-break' | ||
| ]) { | ||
| textarea.style.setProperty(key, 'inherit', 'important'); | ||
| } | ||
| textarea.style.setProperty('height', '100%', 'important'); | ||
| textarea.style.setProperty('box-sizing', 'content-box', 'important'); | ||
| this.host.prepend(textarea); | ||
| return textarea; | ||
| })(); | ||
| } | ||
| valueHandler(n, o) { | ||
| if (n !== o && this.el) { | ||
| let val = n === null && n === undefined ? '' : n.toString(); | ||
| this.el.value = val; | ||
| this.textValue = val; | ||
| constructor(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| this.slotName = randomString(); | ||
| this.value = ''; | ||
| this.disabled = undefined; | ||
| this.textValue = ''; | ||
| this.el = (() => { | ||
| let value = this.value ? this.value.toString() : ''; | ||
| // create new element | ||
| const textarea = document.createElement('textarea'); | ||
| if (value) { | ||
| textarea.value = value; | ||
| } | ||
| textarea.setAttribute('slot', this.slotName); | ||
| textarea.addEventListener('input', e => { | ||
| this.value = e.target.value; | ||
| }); | ||
| for (let key of [ | ||
| 'font-size', | ||
| 'line-height', | ||
| 'font-family', | ||
| 'font-weight', | ||
| 'white-space', | ||
| 'word-break' | ||
| ]) { | ||
| textarea.style.setProperty(key, 'inherit', 'important'); | ||
| } | ||
| textarea.style.setProperty('height', '100%', 'important'); | ||
| textarea.style.setProperty('box-sizing', 'content-box', 'important'); | ||
| this.host.prepend(textarea); | ||
| return textarea; | ||
| })(); | ||
| } | ||
| } | ||
| componentDidRender() { | ||
| if (this.el && this.el.parentElement === null) { | ||
| this.host.prepend(this.el); | ||
| valueHandler(n, o) { | ||
| if (n !== o && this.el) { | ||
| let val = n === null && n === undefined ? '' : n.toString(); | ||
| this.el.value = val; | ||
| this.textValue = val; | ||
| } | ||
| } | ||
| } | ||
| componentWillLoad() { | ||
| let value = this.value !== null && this.value !== undefined ? this.value.toString() : ''; | ||
| if (!value) { | ||
| let nestedValue = this.host.childNodes; | ||
| for (let idx = 0; idx < nestedValue.length; idx++) { | ||
| let el = nestedValue[idx]; | ||
| if (el.nodeType === Node.TEXT_NODE) { | ||
| this.value += el.textContent; | ||
| componentDidRender() { | ||
| if (this.el && this.el.parentElement === null) { | ||
| this.host.prepend(this.el); | ||
| } | ||
| } | ||
| } | ||
| this.textValue = this.value; | ||
| dummyHandler.bind(this)({ | ||
| excludeAttribute: ['value', 'rows', 'cols'], | ||
| moveIdToSlotElement: true, | ||
| excludeStyle: ['border', 'margin', 'padding', 'max', 'min', 'width', 'height'], | ||
| mirrorStyle: (hostCss) => { | ||
| this.el.style.setProperty('border-radius', hostCss['border-radius'], 'important'); | ||
| // make text input fill the host | ||
| let padding = [ | ||
| hostCss['padding-top'], | ||
| hostCss['padding-right'], | ||
| hostCss['padding-bottom'], | ||
| hostCss['padding-left'] | ||
| ]; | ||
| this.el.style.setProperty('padding', hostCss['padding'], 'important'); | ||
| this.el.style.setProperty('margin', padding.map(p => { | ||
| return `-${p}`; | ||
| }).join(' '), 'important'); | ||
| this.el.style.setProperty('min-height', `calc(${hostCss['min-height']} - ${padding[0]} - ${padding[2]})`, 'important'); | ||
| } | ||
| }); | ||
| // dispatch mounted event when finished loading | ||
| this.host.dispatchEvent(new CustomEvent('mounted')); | ||
| } | ||
| render() { | ||
| return (h(Host, { disabled: this.disabled }, h("div", { class: 'shell' }, h("slot", { name: this.slotName, onSlotchange: () => this.componentDidRender() }), h("div", { class: 'text-value', "text-value": this.textValue + ' ' }, h("div", null, h("slot", null)))))); | ||
| } | ||
| get host() { return getElement(this); } | ||
| static get watchers() { return { | ||
| "value": ["valueHandler"] | ||
| }; } | ||
| componentWillLoad() { | ||
| let value = this.value !== null && this.value !== undefined ? this.value.toString() : ''; | ||
| if (!value) { | ||
| let nestedValue = this.host.childNodes; | ||
| for (let idx = 0; idx < nestedValue.length; idx++) { | ||
| let el = nestedValue[idx]; | ||
| if (el.nodeType === Node.TEXT_NODE) { | ||
| this.value += el.textContent; | ||
| } | ||
| } | ||
| } | ||
| this.textValue = this.value; | ||
| dummyHandler.bind(this)({ | ||
| excludeAttribute: ['value', 'rows', 'cols'], | ||
| moveIdToSlotElement: true, | ||
| excludeStyle: ['border', 'margin', 'padding', 'max', 'min', 'width', 'height'], | ||
| mirrorStyle: (hostCss) => { | ||
| this.el.style.setProperty('border-radius', hostCss['border-radius'], 'important'); | ||
| // make text input fill the host | ||
| let padding = [ | ||
| hostCss['padding-top'], | ||
| hostCss['padding-right'], | ||
| hostCss['padding-bottom'], | ||
| hostCss['padding-left'] | ||
| ]; | ||
| this.el.style.setProperty('padding', hostCss['padding'], 'important'); | ||
| this.el.style.setProperty('margin', padding.map(p => { | ||
| return `-${p}`; | ||
| }).join(' '), 'important'); | ||
| this.el.style.setProperty('min-height', `calc(${hostCss['min-height']} - ${padding[0]} - ${padding[2]})`, 'important'); | ||
| } | ||
| }); | ||
| // dispatch mounted event when finished loading | ||
| this.host.dispatchEvent(new CustomEvent('mounted')); | ||
| } | ||
| render() { | ||
| return (h(Host, { key: 'fd0cc5b66029f1dcdbc8eca362e39e62b3d5eb15', disabled: this.disabled }, h("div", { key: '40dc43ff0ec20da55fc095b7c041ab6d481488ce', class: 'shell' }, h("slot", { key: '59cab79f0635cef39c8e173b75a61360e4aa71a4', name: this.slotName, onSlotchange: () => this.componentDidRender() }), h("div", { key: 'd4b9e3d48789479f2f0bae09b7491c17b4f5a94d', class: 'text-value', "text-value": this.textValue + ' ' }, h("div", { key: '2632330ecb0ea4cea570e4a2fc98249194fa2fe9' }, h("slot", { key: '1e99d5edb2e777d1451976ed617bd34b6fc0e632' })))))); | ||
| } | ||
| get host() { return getElement(this); } | ||
| static get watchers() { return { | ||
| "value": ["valueHandler"] | ||
| }; } | ||
| }; | ||
| SuiTextarea.style = suiTextareaCss; | ||
| SuiTextarea.style = SuiTextareaStyle0; | ||
| const suiTooltipCss = ":host{display:inline-block}:host>.sui-tooltip{display:block;position:relative !important}:host>.sui-tooltip>.sui-tool{text-align:inherit}:host>.sui-tooltip .sui-tip{min-width:100%;display:none;position:absolute;max-width:var(--tip-max-width);box-sizing:border-box;bottom:calc(100% + .66em);top:unset;left:0;right:unset}:host>.sui-tooltip.bottom .sui-tip{top:calc(100% + .66em);bottom:unset}:host>.sui-tooltip.left .sui-tip{left:unset;right:0}:host>.sui-tooltip:hover .sui-tip{display:block}:host>.sui-tooltip:hover .tip-arrow{display:block}.tip-arrow{display:none;position:absolute;width:0;height:0;left:50%;transform:translateX(-50%)}.tip-arrow.bottom{z-index:1;top:calc(100% + 2px);bottom:unset;border:0.5em solid transparent;border-top-width:0;border-bottom-width:.66em;border-bottom-color:var(--tip-background-color)}.tip-arrow.top{top:unset;bottom:calc(100% + 2px);border:0.5em solid transparent;border-bottom-width:0;border-top-width:.66em;border-top-color:var(--tip-background-color)}::slotted([slot='tip']){white-space:pre;overflow:hidden}"; | ||
| const suiTooltipCss = ":host{display:inline-block}:host>.sui-tooltip{display:block;position:relative !important}:host>.sui-tooltip>.sui-tool{text-align:inherit}:host>.sui-tooltip .sui-tip{min-width:100%;display:none;position:absolute;box-sizing:border-box;bottom:calc(100% + 8px);top:unset;left:0;right:unset}:host>.sui-tooltip.bottom .sui-tip{top:calc(100% + 8px);bottom:unset}:host>.sui-tooltip.left .sui-tip{left:unset;right:0}:host>.sui-tooltip:hover .sui-tip{display:block}:host>.sui-tooltip:hover .tip-arrow{display:block}.tip-arrow{display:none;position:absolute;width:0;height:0;left:50%;transform:translateX(-50%)}.tip-arrow.bottom{z-index:1;top:calc(100% + 4px);bottom:unset;border:4px solid transparent;border-top-width:0;border-bottom-width:4px;border-bottom-color:var(--tip-background-color)}.tip-arrow.top{top:unset;bottom:calc(100% + 4px);border:4px solid transparent;border-bottom-width:0;border-top-width:4px;border-top-color:var(--tip-background-color)}::slotted([slot='tip']){white-space:pre;overflow:hidden}"; | ||
| const SuiTooltipStyle0 = suiTooltipCss; | ||
| const SuiTooltip = class { | ||
| constructor(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| this.maxWidth = '100vw'; | ||
| this.classNames = ''; | ||
| this.tipBackgroundColor = 'transparent'; | ||
| } | ||
| setPosition(e) { | ||
| let y = window.innerHeight / 2; | ||
| let x = window.innerWidth / 2; | ||
| let isBottom = e.clientY < y; | ||
| let isLeft = e.clientX > x; | ||
| this.classNames = ''; | ||
| if (isBottom) { | ||
| this.classNames += ' bottom'; | ||
| constructor(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| this.classNames = ''; | ||
| this.tipBackgroundColor = 'transparent'; | ||
| } | ||
| else { | ||
| this.classNames += ' top'; | ||
| setPosition(e) { | ||
| let y = window.innerHeight / 2; | ||
| let x = window.innerWidth / 2; | ||
| let isBottom = e.clientY < y; | ||
| let isLeft = e.clientX > x; | ||
| this.classNames = ''; | ||
| if (isBottom) { | ||
| this.classNames += ' bottom'; | ||
| } | ||
| else { | ||
| this.classNames += ' top'; | ||
| } | ||
| if (isLeft) { | ||
| this.classNames += ' left'; | ||
| } | ||
| else { | ||
| this.classNames += ' right'; | ||
| } | ||
| let tip = this.host.querySelectorAll('[slot="tip"]'); | ||
| this.tipBackgroundColor = window.getComputedStyle(tip[0]).getPropertyValue('background-color'); | ||
| } | ||
| if (isLeft) { | ||
| this.classNames += ' left'; | ||
| this.maxWidth = `${e.clientX - 16}px`; | ||
| render() { | ||
| return (h(Host, { key: '55f111fc62de75215d1f4b5829aeead84f36e60f' }, h("div", { key: '8df70c5bfcc671e0e2477dae26139cd609ee01bf', class: 'sui-tooltip' + this.classNames }, h("div", { key: '6c834bdd0589a8533628a555beeb55d8a9a8ab79', class: 'sui-tool' }, h("slot", { key: '8b466243a3495d36b98961140a28515692879120', name: 'tool' }), h("div", { key: '677ddbc5bc057f2edae2183815e74ed67d55b4d9', class: 'sui-tip', style: { '--tip-background-color': this.tipBackgroundColor } }, h("slot", { key: '9fbb2cb45e605f3a0a2317485adc1b6c79731357', name: 'tip' })), h("div", { key: '50b4b3f3333e85acc1d67358a09559106d7bc560', class: 'tip-arrow' + this.classNames, style: { '--tip-background-color': this.tipBackgroundColor } }))))); | ||
| } | ||
| else { | ||
| this.classNames += ' right'; | ||
| this.maxWidth = `${window.innerWidth - e.clientX - 16}px`; | ||
| } | ||
| let tip = this.host.querySelectorAll('[slot="tip"]'); | ||
| this.tipBackgroundColor = window.getComputedStyle(tip[0]).getPropertyValue('background-color'); | ||
| } | ||
| render() { | ||
| return (h(Host, null, h("div", { class: 'sui-tooltip' + this.classNames }, h("div", { class: 'sui-tool' }, h("slot", { name: 'tool' }), h("div", { class: 'sui-tip', style: { '--tip-max-width': this.maxWidth, '--tip-background-color': this.tipBackgroundColor } }, h("slot", { name: 'tip' })), h("div", { class: 'tip-arrow' + this.classNames, style: { '--tip-background-color': this.tipBackgroundColor } }))))); | ||
| } | ||
| get host() { return getElement(this); } | ||
| get host() { return getElement(this); } | ||
| }; | ||
| SuiTooltip.style = suiTooltipCss; | ||
| SuiTooltip.style = SuiTooltipStyle0; | ||
| export { SuiFlextext as sui_flextext, SuiNav as sui_nav, SuiOverlay as sui_overlay, SuiTextarea as sui_textarea, SuiTooltip as sui_tooltip }; | ||
| //# sourceMappingURL=sui-flextext_5.entry.js.map |
@@ -1,1 +0,2 @@ | ||
| import{p as e,b as i}from"./p-29d23de6.js";export{s as setNonce}from"./p-29d23de6.js";(()=>{const i=import.meta.url,t={};return""!==i&&(t.resourcesUrl=new URL(".",i).href),e(t)})().then((e=>i([["p-244eab1b",[[1,"sui-flextext",{minSize:[1026,"min-size"],maxSize:[1026,"max-size"]}],[1,"sui-nav",{autoHide:[2,"auto-hide"]}],[1,"sui-overlay",{position:[1],transitionTime:[1,"transition-time"],close:[64],open:[64]}],[1,"sui-textarea",{value:[1025],disabled:[4],el:[16],textValue:[32]}],[1,"sui-tooltip",{maxWidth:[32],classNames:[32],tipBackgroundColor:[32]},[[1,"mouseenter","setPosition"]]]]]],e))); | ||
| import{p as e,b as i}from"./p-db654622.js";export{s as setNonce}from"./p-db654622.js";import{g as t}from"./p-e1255160.js";var a=()=>{const i=import.meta.url;const t={};if(i!==""){t.resourcesUrl=new URL(".",i).href}return e(t)};a().then((async e=>{await t();return i([["p-e689d09c",[[1,"sui-flextext",{minSize:[1026,"min-size"],maxSize:[1026,"max-size"]}],[1,"sui-nav",{autoHide:[2,"auto-hide"]}],[1,"sui-overlay",{position:[1],transitionTime:[1,"transition-time"],close:[64],open:[64]}],[1,"sui-textarea",{value:[1025],disabled:[4],el:[16],textValue:[32]},null,{value:["valueHandler"]}],[1,"sui-tooltip",{classNames:[32],tipBackgroundColor:[32]},[[1,"mouseenter","setPosition"]]]]]],e)})); | ||
| //# sourceMappingURL=skateui.esm.js.map |
| export declare class SuiFlextext { | ||
| host: HTMLElement; | ||
| minSize: number; | ||
| maxSize: number; | ||
| fontSize: number; | ||
| computedStyle: CSSStyleDeclaration; | ||
| componentWillLoad(): void; | ||
| adjustSize: () => void; | ||
| componentDidLoad(): void; | ||
| disconnectedCallback(): void; | ||
| render(): any; | ||
| host: HTMLElement; | ||
| minSize: number; | ||
| maxSize: number; | ||
| fontSize: number; | ||
| computedStyle: CSSStyleDeclaration; | ||
| componentWillLoad(): void; | ||
| adjustSize: () => void; | ||
| componentDidLoad(): void; | ||
| disconnectedCallback(): void; | ||
| render(): any; | ||
| } |
| export declare class SuiNav { | ||
| host: HTMLElement; | ||
| autoHide: number; | ||
| navCss: CSSStyleDeclaration; | ||
| parent: HTMLElement | Window; | ||
| scrollOffset: number; | ||
| topOffset: number; | ||
| offsetProp: string; | ||
| componentWillLoad(): void; | ||
| disconnectedCallback(): void; | ||
| componentDidLoad(): void; | ||
| calcNavbarPosition: any; | ||
| render(): any; | ||
| host: HTMLElement; | ||
| autoHide: number; | ||
| navCss: CSSStyleDeclaration; | ||
| parent: HTMLElement | Window; | ||
| scrollOffset: number; | ||
| topOffset: number; | ||
| offsetProp: string; | ||
| componentWillLoad(): void; | ||
| disconnectedCallback(): void; | ||
| componentDidLoad(): void; | ||
| calcNavbarPosition: any; | ||
| render(): any; | ||
| } |
| export declare class SuiOverlay { | ||
| host: HTMLElement; | ||
| position: string; | ||
| transitionTime: string; | ||
| overlayId: any; | ||
| componentWillLoad(): void; | ||
| createScreen(): HTMLDivElement; | ||
| close(cb?: () => any): Promise<void>; | ||
| open(cb?: () => any): Promise<unknown>; | ||
| disconnectedCallback(): void; | ||
| render(): any; | ||
| host: HTMLElement; | ||
| position: string; | ||
| transitionTime: string; | ||
| overlayId: any; | ||
| componentWillLoad(): void; | ||
| createScreen(): HTMLDivElement; | ||
| close(cb?: () => any): Promise<void>; | ||
| open(cb?: () => any): Promise<unknown>; | ||
| disconnectedCallback(): void; | ||
| render(): any; | ||
| } |
| export declare class SuiTextarea { | ||
| observer: MutationObserver; | ||
| host: HTMLElement; | ||
| value: string; | ||
| disabled: boolean; | ||
| valueHandler(n: string, o: string): void; | ||
| slotName: string; | ||
| textValue: string; | ||
| el: HTMLTextAreaElement; | ||
| componentDidRender(): void; | ||
| componentWillLoad(): void; | ||
| render(): any; | ||
| observer: MutationObserver; | ||
| host: HTMLElement; | ||
| value: string; | ||
| disabled: boolean; | ||
| valueHandler(n: string, o: string): void; | ||
| slotName: string; | ||
| textValue: string; | ||
| el: HTMLTextAreaElement; | ||
| componentDidRender(): void; | ||
| componentWillLoad(): void; | ||
| render(): any; | ||
| } |
| export declare class SuiTooltip { | ||
| host: HTMLElement; | ||
| maxWidth: string; | ||
| classNames: string; | ||
| tipBackgroundColor: string; | ||
| setPosition(e: MouseEvent): void; | ||
| render(): any; | ||
| host: HTMLElement; | ||
| classNames: string; | ||
| tipBackgroundColor: string; | ||
| setPosition(e: MouseEvent): void; | ||
| render(): any; | ||
| } |
@@ -7,2 +7,12 @@ declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void; | ||
| /** | ||
| * When set to `true` this component will be form-associated. See | ||
| * https://stenciljs.com/docs/next/form-associated documentation on how to | ||
| * build form-associated Stencil components that integrate into forms like | ||
| * native browser elements such as `<input>` and `<textarea>`. | ||
| * | ||
| * The {@link AttachInternals} decorator allows for access to the | ||
| * `ElementInternals` object to modify the associated form. | ||
| */ | ||
| formAssociated?: boolean; | ||
| /** | ||
| * Tag name of the web component. Ideally, the tag name must be globally unique, | ||
@@ -66,3 +76,3 @@ * so it's recommended to choose an unique prefix for all your components within the same collection. | ||
| * Stencil uses different heuristics to determine the default name of the attribute, | ||
| * but using this property, you can override the default behaviour. | ||
| * but using this property, you can override the default behavior. | ||
| */ | ||
@@ -112,2 +122,5 @@ attribute?: string | null; | ||
| } | ||
| export interface AttachInternalsDecorator { | ||
| (): PropertyDecorator; | ||
| } | ||
| export interface ListenDecorator { | ||
@@ -134,3 +147,3 @@ (eventName: string, opts?: ListenOptions): CustomMethodDecorator<any>; | ||
| * | ||
| * Using the `passive` option can be used to change the default behaviour. | ||
| * Using the `passive` option can be used to change the default behavior. | ||
| * Please see https://developers.google.com/web/updates/2016/06/passive-event-listeners for further information. | ||
@@ -183,2 +196,8 @@ */ | ||
| /** | ||
| * If the `formAssociated` option is set in options passed to the | ||
| * `@Component()` decorator then this decorator may be used to get access to the | ||
| * `ElementInternals` instance associated with the component. | ||
| */ | ||
| export declare const AttachInternals: AttachInternalsDecorator; | ||
| /** | ||
| * The `Listen()` decorator is for listening DOM events, including the ones | ||
@@ -440,3 +459,3 @@ * dispatched from `@Events()`. | ||
| */ | ||
| interface HostAttributes { | ||
| export interface HostAttributes { | ||
| class?: string | { | ||
@@ -480,3 +499,3 @@ [className: string]: boolean; | ||
| * Since the Stencil runtime uses a different interface for children it is | ||
| * not recommendeded to read the children directly, and is preferable to use | ||
| * not recommended to read the children directly, and is preferable to use | ||
| * this utility to, for instance, perform a side effect for each child. | ||
@@ -759,2 +778,3 @@ */ | ||
| media?: string; | ||
| ping?: string; | ||
| rel?: string; | ||
@@ -786,3 +806,2 @@ target?: string; | ||
| interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> { | ||
| autoFocus?: boolean; | ||
| disabled?: boolean; | ||
@@ -803,2 +822,5 @@ form?: string; | ||
| value?: string | string[] | number; | ||
| popoverTargetAction?: string; | ||
| popoverTargetElement?: Element | null; | ||
| popoverTarget?: string; | ||
| } | ||
@@ -825,2 +847,3 @@ interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> { | ||
| interface DialogHTMLAttributes<T> extends HTMLAttributes<T> { | ||
| onCancel?: (event: Event) => void; | ||
| onClose?: (event: Event) => void; | ||
@@ -885,2 +908,4 @@ open?: boolean; | ||
| alt?: string; | ||
| crossOrigin?: string; | ||
| crossorigin?: string; | ||
| decoding?: 'async' | 'auto' | 'sync'; | ||
@@ -907,8 +932,6 @@ importance?: 'low' | 'auto' | 'high'; | ||
| alt?: string; | ||
| autoCapitalize?: any; | ||
| autocapitalize?: any; | ||
| autoCapitalize?: string; | ||
| autocapitalize?: string; | ||
| autoComplete?: string; | ||
| autocomplete?: string; | ||
| autoFocus?: boolean; | ||
| autofocus?: boolean | string; | ||
| capture?: string; | ||
@@ -945,2 +968,4 @@ checked?: boolean; | ||
| name?: string; | ||
| onSelect?: (event: Event) => void; | ||
| onselect?: (event: Event) => void; | ||
| pattern?: string; | ||
@@ -964,6 +989,7 @@ placeholder?: string; | ||
| width?: number | string; | ||
| popoverTargetAction?: string; | ||
| popoverTargetElement?: Element | null; | ||
| popoverTarget?: string; | ||
| } | ||
| interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> { | ||
| autoFocus?: boolean; | ||
| autofocus?: boolean | string; | ||
| challenge?: string; | ||
@@ -981,3 +1007,2 @@ disabled?: boolean; | ||
| htmlFor?: string; | ||
| htmlfor?: string; | ||
| } | ||
@@ -1093,3 +1118,2 @@ interface LiHTMLAttributes<T> extends HTMLAttributes<T> { | ||
| htmlFor?: string; | ||
| htmlfor?: string; | ||
| name?: string; | ||
@@ -1119,3 +1143,2 @@ } | ||
| interface SelectHTMLAttributes<T> extends HTMLAttributes<T> { | ||
| autoFocus?: boolean; | ||
| disabled?: boolean; | ||
@@ -1131,2 +1154,3 @@ form?: string; | ||
| interface SourceHTMLAttributes<T> extends HTMLAttributes<T> { | ||
| height?: number; | ||
| media?: string; | ||
@@ -1137,2 +1161,3 @@ sizes?: string; | ||
| type?: string; | ||
| width?: number; | ||
| } | ||
@@ -1153,4 +1178,4 @@ interface StyleHTMLAttributes<T> extends HTMLAttributes<T> { | ||
| interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> { | ||
| autoFocus?: boolean; | ||
| autofocus?: boolean | string; | ||
| autoComplete?: string; | ||
| autocomplete?: string; | ||
| cols?: number; | ||
@@ -1164,2 +1189,4 @@ disabled?: boolean; | ||
| name?: string; | ||
| onSelect?: (event: Event) => void; | ||
| onselect?: (event: Event) => void; | ||
| placeholder?: string; | ||
@@ -1207,2 +1234,4 @@ readOnly?: boolean; | ||
| accessKey?: string; | ||
| autoFocus?: boolean; | ||
| autofocus?: boolean | string; | ||
| class?: string | { | ||
@@ -1219,2 +1248,3 @@ [className: string]: boolean; | ||
| id?: string; | ||
| inert?: boolean; | ||
| lang?: string; | ||
@@ -1228,2 +1258,3 @@ spellcheck?: 'true' | 'false' | any; | ||
| title?: string; | ||
| popover?: string | null; | ||
| inputMode?: string; | ||
@@ -1245,4 +1276,4 @@ inputmode?: string; | ||
| vocab?: string; | ||
| autoCapitalize?: any; | ||
| autocapitalize?: any; | ||
| autoCapitalize?: string; | ||
| autocapitalize?: string; | ||
| autoCorrect?: string; | ||
@@ -1315,3 +1346,3 @@ autocorrect?: string; | ||
| 'color-interpolation'?: number | string; | ||
| 'color-interpolation-filters'?: 'auto' | 's-rGB' | 'linear-rGB' | 'inherit'; | ||
| 'color-interpolation-filters'?: 'auto' | 'sRGB' | 'linearRGB'; | ||
| 'color-profile'?: number | string; | ||
@@ -1539,8 +1570,8 @@ 'color-rendering'?: number | string; | ||
| onPasteCapture?: (event: ClipboardEvent) => void; | ||
| onCompositionEnd?: (event: CompositionEvent) => void; | ||
| onCompositionEndCapture?: (event: CompositionEvent) => void; | ||
| onCompositionStart?: (event: CompositionEvent) => void; | ||
| onCompositionStartCapture?: (event: CompositionEvent) => void; | ||
| onCompositionUpdate?: (event: CompositionEvent) => void; | ||
| onCompositionUpdateCapture?: (event: CompositionEvent) => void; | ||
| onCompositionend?: (event: CompositionEvent) => void; | ||
| onCompositionendCapture?: (event: CompositionEvent) => void; | ||
| onCompositionstart?: (event: CompositionEvent) => void; | ||
| onCompositionstartCapture?: (event: CompositionEvent) => void; | ||
| onCompositionupdate?: (event: CompositionEvent) => void; | ||
| onCompositionupdateCapture?: (event: CompositionEvent) => void; | ||
| onFocus?: (event: FocusEvent) => void; | ||
@@ -1556,4 +1587,4 @@ onFocusCapture?: (event: FocusEvent) => void; | ||
| onChangeCapture?: (event: Event) => void; | ||
| onInput?: (event: Event) => void; | ||
| onInputCapture?: (event: Event) => void; | ||
| onInput?: (event: InputEvent) => void; | ||
| onInputCapture?: (event: InputEvent) => void; | ||
| onReset?: (event: Event) => void; | ||
@@ -1648,4 +1679,10 @@ onResetCapture?: (event: Event) => void; | ||
| onAnimationIterationCapture?: (event: AnimationEvent) => void; | ||
| onTransitionCancel?: (event: TransitionEvent) => void; | ||
| onTransitionCancelCapture?: (event: TransitionEvent) => void; | ||
| onTransitionEnd?: (event: TransitionEvent) => void; | ||
| onTransitionEndCapture?: (event: TransitionEvent) => void; | ||
| onTransitionRun?: (event: TransitionEvent) => void; | ||
| onTransitionRunCapture?: (event: TransitionEvent) => void; | ||
| onTransitionStart?: (event: TransitionEvent) => void; | ||
| onTransitionStartCapture?: (event: TransitionEvent) => void; | ||
| } | ||
@@ -1652,0 +1689,0 @@ } |
| export declare const eventList: string[]; | ||
| export declare function cloneEvents(el: HTMLElement, options?: { | ||
| dispatchTo: HTMLElement; | ||
| bypass?: string[]; | ||
| eventCallback?: { | ||
| type: string; | ||
| callback: (e: any) => any; | ||
| }; | ||
| dispatchTo: HTMLElement; | ||
| bypass?: string[]; | ||
| eventCallback?: { | ||
| type: string; | ||
| callback: (e: any) => any; | ||
| }; | ||
| }): void; | ||
@@ -18,18 +18,18 @@ export declare function format(first: string, middle: string, last: string): string; | ||
| export declare function dummyHandler(options?: any | { | ||
| moveIdToSlotElement?: boolean; | ||
| excludeAttribute?: string[]; | ||
| mirrorStyle?: string[] | ((css: CSSStyleDeclaration) => any); | ||
| excludeStyle?: string[]; | ||
| trackNodes?: boolean | ((n: MutationRecord) => any); | ||
| log?: boolean | ((l: { | ||
| attributeName: string; | ||
| newValue?: string; | ||
| oldValue?: string; | ||
| mutationRecord?: MutationRecord; | ||
| }) => any); | ||
| mirrorEvents: boolean | string[] | Record<string, (e: Event) => any> | ((e: Event) => any); | ||
| excludeEvents: string[]; | ||
| bounceEvents: boolean | string[] | Record<string, (e: Event) => any> | ((e: Event) => any); | ||
| moveIdToSlotElement?: boolean; | ||
| excludeAttribute?: string[]; | ||
| mirrorStyle?: string[] | ((css: CSSStyleDeclaration) => any); | ||
| excludeStyle?: string[]; | ||
| trackNodes?: boolean | ((n: MutationRecord) => any); | ||
| log?: boolean | ((l: { | ||
| attributeName: string; | ||
| newValue?: string; | ||
| oldValue?: string; | ||
| mutationRecord?: MutationRecord; | ||
| }) => any); | ||
| mirrorEvents: boolean | string[] | Record<string, (e: Event) => any> | ((e: Event) => any); | ||
| excludeEvents: string[]; | ||
| bounceEvents: boolean | string[] | Record<string, (e: Event) => any> | ((e: Event) => any); | ||
| }): { | ||
| init: (fullInit: boolean) => void; | ||
| init: (fullInit: boolean) => void; | ||
| }; |
@@ -1,3 +0,1 @@ | ||
| module.exports = require('../dist/cjs/loader.cjs.js'); | ||
| module.exports.applyPolyfills = function() { return Promise.resolve() }; | ||
| module.exports = require('../dist/cjs/loader.cjs.js'); |
@@ -1,3 +0,1 @@ | ||
| module.exports = require('../dist/cjs/loader.cjs.js'); | ||
| module.exports.applyPolyfills = function() { return Promise.resolve() }; | ||
| module.exports = require('../dist/cjs/loader.cjs.js'); |
@@ -11,6 +11,9 @@ export * from '../dist/types/components'; | ||
| } | ||
| export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>; | ||
| export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void; | ||
| /** | ||
| * @deprecated | ||
| */ | ||
| export declare function applyPolyfills(): Promise<void>; | ||
| /** | ||
| /** | ||
| * Used to specify a nonce value that corresponds with an application's CSP. | ||
@@ -17,0 +20,0 @@ * When set, the nonce will be added to all dynamically created script and style tags at runtime. |
@@ -1,3 +0,1 @@ | ||
| export * from '../dist/esm/polyfills/index.js'; | ||
| export * from '../dist/esm/loader.js'; | ||
| export * from '../dist/esm/loader.js'; |
@@ -1,4 +0,2 @@ | ||
| (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})(); | ||
| export * from '../dist/esm/polyfills/index.js'; | ||
| export * from '../dist/esm/loader.js'; | ||
| export * from '../dist/esm/loader.js'; |
| { | ||
| "name": "skateui", | ||
| "version": "0.2.2", | ||
| "version": "0.2.3", | ||
| "description": "Vanilla HTML compatible custom UI components", | ||
@@ -29,5 +29,2 @@ "main": "dist/index.cjs.js", | ||
| }, | ||
| "dependencies": { | ||
| "@stencil/core": "^2.22.3" | ||
| }, | ||
| "devDependencies": { | ||
@@ -39,3 +36,6 @@ "@types/jest": "^27.0.3", | ||
| }, | ||
| "license": "MIT" | ||
| "license": "MIT", | ||
| "dependencies": { | ||
| "@stencil/core": "^4.19.2" | ||
| } | ||
| } |
@@ -21,3 +21,3 @@ # Skate UI | ||
| Attributes: | ||
| - auto-hide: "true" | "false" | Number(Higher number means it will hide slower) | ||
| - auto-hide: Number(Higher number means it will hide slower) | ||
@@ -24,0 +24,0 @@ - sui-flextext: Text that auto scales. |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Network access
Supply chain riskThis module accesses the network.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by128.47%
1050030
- Number of package files
- increased by39.62%
74
- Number of low supply chain risk alerts
- decreased by-28.57%
5
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Lines of code
- decreased by-10.28%
7921
Dependency changes
+ Added@stencil/core@4.23.1(transitive)
- Removed@stencil/core@2.22.3(transitive)
Updated@stencil/core@^4.19.2