@limetech/lime-elements 38.33.5 → 38.33.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/dist/cjs/limel-badge.cjs.entry.js +1 -1
- package/dist/cjs/limel-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-breadcrumbs_8.cjs.entry.js +147 -21
- package/dist/cjs/limel-breadcrumbs_8.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-tab-bar.cjs.entry.js +1 -1
- package/dist/cjs/limel-tab-bar.cjs.entry.js.map +1 -1
- package/dist/collection/components/badge/badge.css +1 -0
- package/dist/collection/components/menu/menu.js +147 -21
- package/dist/collection/components/menu/menu.js.map +1 -1
- package/dist/collection/components/tab-bar/tab-bar.css +5 -3
- package/dist/collection/test-assets/icons/home.svg +6 -0
- package/dist/esm/limel-badge.entry.js +1 -1
- package/dist/esm/limel-badge.entry.js.map +1 -1
- package/dist/esm/limel-breadcrumbs_8.entry.js +147 -21
- package/dist/esm/limel-breadcrumbs_8.entry.js.map +1 -1
- package/dist/esm/limel-tab-bar.entry.js +1 -1
- package/dist/esm/limel-tab-bar.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-eb121716.entry.js → p-033a0aa9.entry.js} +4 -4
- package/dist/lime-elements/p-033a0aa9.entry.js.map +1 -0
- package/dist/lime-elements/p-18256ad9.entry.js +2 -0
- package/dist/lime-elements/p-18256ad9.entry.js.map +1 -0
- package/dist/lime-elements/{p-d80e776d.entry.js → p-407a0e61.entry.js} +2 -2
- package/dist/lime-elements/{p-d80e776d.entry.js.map → p-407a0e61.entry.js.map} +1 -1
- package/dist/types/components/menu/menu.d.ts +39 -24
- package/package.json +1 -1
- package/dist/lime-elements/p-18a3c28a.entry.js +0 -2
- package/dist/lime-elements/p-18a3c28a.entry.js.map +0 -1
- package/dist/lime-elements/p-eb121716.entry.js.map +0 -1
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,h as i,H as r}from"./p-288f0842.js";import{a as t}from"./p-b6a372c9.js";import"./p-4e9b4087.js";const s='@charset "UTF-8";:host([hidden]){display:none}:host(limel-badge){--limel-min-badge-size:1rem;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;min-height:var(--limel-min-badge-size);min-width:var(--limel-min-badge-size);border-radius:var(--limel-min-badge-size)}span{cursor:default;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:0.6875rem;line-height:var(--limel-min-badge-size);color:var(--badge-text-color, rgb(var(--contrast-1200)));border-radius:var(--limel-min-badge-size);max-height:var(--limel-min-badge-size);min-width:0.5rem;min-height:0.5rem;background-color:var(--badge-background-color, rgb(var(--contrast-500)))}span:not(:empty){min-width:var(--limel-min-badge-size);max-width:var(--badge-max-width, 2.75rem);padding:0 0.28125rem}:host(.has-large-label) span{cursor:help}';const a=class{constructor(i){e(this,i);this.label=undefined}render(){return i(r,{title:this.labelIsLarge()?this.label:"",class:{"has-large-label":this.labelIsLarge()}},i("span",null,this.renderLabel()))}renderLabel(){if(typeof this.label==="number"){return t(this.label)}return this.label}labelIsLarge(){const e=999;const i=6;if(typeof this.label==="number"&&this.label>e||typeof this.label==="string"&&this.label.length>i){return true}}};a.style=s;export{a as limel_badge};
|
|
2
|
+
//# sourceMappingURL=p-18256ad9.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["badgeCss","Badge","render","h","Host","title","this","labelIsLarge","label","class","renderLabel","abbreviate","largeNumericLabel","largeStringLabel","length"],"sources":["./src/components/badge/badge.scss?tag=limel-badge&encapsulation=shadow","./src/components/badge/badge.tsx"],"sourcesContent":["@use '../../style/functions';\n@use '../../style/mixins';\n\n/**\n * @prop --badge-background-color: badge background color\n * @prop --badge-text-color: badge text color\n * @prop --badge-max-width: maximum width of the badge, before its text gets truncated\n */\n\n:host([hidden]) {\n display: none;\n}\n\n:host(limel-badge) {\n --limel-min-badge-size: 1rem;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n min-height: var(--limel-min-badge-size);\n min-width: var(--limel-min-badge-size);\n border-radius: var(--limel-min-badge-size);\n}\n\nspan {\n cursor: default;\n box-sizing: border-box;\n\n @include mixins.truncate-text;\n text-align: center;\n font-size: functions.pxToRem(11);\n line-height: var(--limel-min-badge-size);\n\n color: var(--badge-text-color, rgb(var(--contrast-1200)));\n\n border-radius: var(--limel-min-badge-size);\n max-height: var(--limel-min-badge-size);\n min-width: 0.5rem;\n min-height: 0.5rem;\n\n background-color: var(--badge-background-color, rgb(var(--contrast-500)));\n\n &:not(:empty) {\n min-width: var(\n --limel-min-badge-size\n ); // ensures that a badge with only one character rendered as perfect circle\n max-width: var(--badge-max-width, 2.75rem);\n padding: 0 functions.pxToRem(4.5);\n }\n}\n\n:host(.has-large-label) {\n span {\n cursor: help;\n }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { abbreviate } from './format';\n\n/**\n * The Badge component can be used to display a notification badge,\n * optionally with a number or a text label.\n *\n * @exampleComponent limel-example-badge\n * @exampleComponent limel-example-badge-number\n * @exampleComponent limel-example-badge-string\n */\n@Component({\n tag: 'limel-badge',\n styleUrl: 'badge.scss',\n shadow: true,\n})\nexport class Badge {\n /**\n * Label to display in the badge.\n * Numeric labels larger than 999 will be rounded and abbreviated.\n * String labels get truncated if their length is longer than\n * six characters.\n */\n @Prop({ reflect: true })\n public label?: number | string;\n\n public render() {\n return (\n <Host\n title={this.labelIsLarge() ? this.label : ''}\n class={{\n 'has-large-label': this.labelIsLarge(),\n }}\n >\n <span>{this.renderLabel()}</span>\n </Host>\n );\n }\n\n private renderLabel() {\n if (typeof this.label === 'number') {\n return abbreviate(this.label);\n }\n\n return this.label;\n }\n\n private labelIsLarge() {\n const largeNumericLabel = 999;\n const largeStringLabel = 6;\n if (\n (typeof this.label === 'number' &&\n this.label > largeNumericLabel) ||\n (typeof this.label === 'string' &&\n this.label.length > largeStringLabel)\n ) {\n return true;\n }\n }\n}\n"],"mappings":"8GAAA,MAAMA,EAAW,02B,MCgBJC,EAAK,M,8CAUPC,SACH,OACIC,EAACC,EAAI,CACDC,MAAOC,KAAKC,eAAiBD,KAAKE,MAAQ,GAC1CC,MAAO,CACH,kBAAmBH,KAAKC,iBAG5BJ,EAAA,YAAOG,KAAKI,e,CAKhBA,cACJ,UAAWJ,KAAKE,QAAU,SAAU,CAChC,OAAOG,EAAWL,KAAKE,M,CAG3B,OAAOF,KAAKE,K,CAGRD,eACJ,MAAMK,EAAoB,IAC1B,MAAMC,EAAmB,EACzB,UACYP,KAAKE,QAAU,UACnBF,KAAKE,MAAQI,UACTN,KAAKE,QAAU,UACnBF,KAAKE,MAAMM,OAASD,EAC1B,CACE,OAAO,I"}
|
|
@@ -416,5 +416,5 @@ import{r as t,c as r,h as e,g as n}from"./p-288f0842.js";import{g as i,a as o}fr
|
|
|
416
416
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
417
417
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
418
418
|
* THE SOFTWARE.
|
|
419
|
-
*/var tt=$.strings;var rt=0;var et=function(t){c(r,t);function r(){return t!==null&&t.apply(this,arguments)||this}r.attachTo=function(t){return new r(t)};Object.defineProperty(r.prototype,"focusOnActivate",{set:function(t){var r,e;try{for(var n=h(this.tabList),i=n.next();!i.done;i=n.next()){var o=i.value;o.focusOnActivate=t}}catch(t){r={error:t}}finally{try{if(i&&!i.done&&(e=n.return))e.call(n)}finally{if(r)throw r.error}}},enumerable:false,configurable:true});Object.defineProperty(r.prototype,"useAutomaticActivation",{set:function(t){this.foundation.setUseAutomaticActivation(t)},enumerable:false,configurable:true});r.prototype.initialize=function(t,r){if(t===void 0){t=function(t){return new G(t)}}if(r===void 0){r=function(t){return new P(t)}}this.tabList=this.instantiateTabs(t);this.tabScroller=this.instantiatetabScroller(r)};r.prototype.initialSyncWithDOM=function(){var t=this;this.handleTabInteraction=function(r){t.foundation.handleTabInteraction(r)};this.handleKeyDown=function(r){t.foundation.handleKeyDown(r)};this.listen(U.strings.INTERACTED_EVENT,this.handleTabInteraction);this.listen("keydown",this.handleKeyDown);for(var r=0;r<this.tabList.length;r++){if(this.tabList[r].active){this.scrollIntoView(r);break}}};r.prototype.destroy=function(){var r,e;t.prototype.destroy.call(this);this.unlisten(U.strings.INTERACTED_EVENT,this.handleTabInteraction);this.unlisten("keydown",this.handleKeyDown);try{for(var n=h(this.tabList),i=n.next();!i.done;i=n.next()){var o=i.value;o.destroy()}}catch(t){r={error:t}}finally{try{if(i&&!i.done&&(e=n.return))e.call(n)}finally{if(r)throw r.error}}if(this.tabScroller){this.tabScroller.destroy()}};r.prototype.getDefaultFoundation=function(){var t=this;var r={scrollTo:function(r){t.tabScroller.scrollTo(r)},incrementScroll:function(r){t.tabScroller.incrementScroll(r)},getScrollPosition:function(){return t.tabScroller.getScrollPosition()},getScrollContentWidth:function(){return t.tabScroller.getScrollContentWidth()},getOffsetWidth:function(){return t.root.offsetWidth},isRTL:function(){return window.getComputedStyle(t.root).getPropertyValue("direction")==="rtl"},setActiveTab:function(r){t.foundation.activateTab(r)},activateTabAtIndex:function(r,e){t.tabList[r].activate(e)},deactivateTabAtIndex:function(r){t.tabList[r].deactivate()},focusTabAtIndex:function(r){t.tabList[r].focus()},getTabIndicatorClientRectAtIndex:function(r){return t.tabList[r].computeIndicatorClientRect()},getTabDimensionsAtIndex:function(r){return t.tabList[r].computeDimensions()},getPreviousActiveTabIndex:function(){for(var r=0;r<t.tabList.length;r++){if(t.tabList[r].active){return r}}return-1},getFocusedTabIndex:function(){var r=t.getTabElements();var e=document.activeElement;return r.indexOf(e)},getIndexOfTabById:function(r){for(var e=0;e<t.tabList.length;e++){if(t.tabList[e].id===r){return e}}return-1},getTabListLength:function(){return t.tabList.length},notifyTabActivated:function(r){return t.emit(tt.TAB_ACTIVATED_EVENT,{index:r},true)}};return new $(r)};r.prototype.activateTab=function(t){this.foundation.activateTab(t)};r.prototype.scrollIntoView=function(t){this.foundation.scrollIntoView(t)};r.prototype.getTabElements=function(){return[].slice.call(this.root.querySelectorAll(tt.TAB_SELECTOR))};r.prototype.instantiateTabs=function(t){return this.getTabElements().map((function(r){r.id=r.id||"mdc-tab-"+ ++rt;return t(r)}))};r.prototype.instantiatetabScroller=function(t){var r=this.root.querySelector(tt.TAB_SCROLLER_SELECTOR);if(r){return t(r)}return null};return r}(d);function nt(t,r){const e=t.findIndex((t=>t.active===true));const n=[...t];if(e!==-1){n[e]=Object.assign(Object.assign({},t[e]),{active:false})}n[r]=Object.assign(Object.assign({},t[r]),{active:true});return n}const it="@charset \"UTF-8\";.mdc-tab-bar{width:100%}.mdc-tab{height:48px}.mdc-tab--stacked{height:72px}.mdc-tab-scroller{overflow-y:hidden}.mdc-tab-scroller.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-content{transition:250ms transform cubic-bezier(0.4, 0, 0.2, 1)}.mdc-tab-scroller__test{position:absolute;top:-9999px;width:100px;height:100px;overflow-x:scroll}.mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:touch;display:flex;overflow-x:hidden}.mdc-tab-scroller__scroll-area::-webkit-scrollbar,.mdc-tab-scroller__test::-webkit-scrollbar{display:none}.mdc-tab-scroller__scroll-area--scroll{overflow-x:scroll}.mdc-tab-scroller__scroll-content{position:relative;display:flex;flex:1 0 auto;transform:none;will-change:transform}.mdc-tab-scroller--align-start .mdc-tab-scroller__scroll-content{justify-content:flex-start}.mdc-tab-scroller--align-end .mdc-tab-scroller__scroll-content{justify-content:flex-end}.mdc-tab-scroller--align-center .mdc-tab-scroller__scroll-content{justify-content:center}.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:auto}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-color:#6200ee;border-color:var(--mdc-theme-primary, #6200ee)}.mdc-tab-indicator .mdc-tab-indicator__content--icon{color:#018786;color:var(--mdc-theme-secondary, #018786)}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-top-width:2px}.mdc-tab-indicator .mdc-tab-indicator__content--icon{height:34px;font-size:34px}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator__content--icon{align-self:center;margin:0 auto}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}.mdc-tab-indicator .mdc-tab-indicator__content{transition:250ms transform cubic-bezier(0.4, 0, 0.2, 1)}.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition:150ms opacity linear}.mdc-tab-indicator--active.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition-delay:100ms}.mdc-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-button-font-size, 0.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight, 500);letter-spacing:0.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, 0.0892857143em);text-decoration:none;text-decoration:var(--mdc-typography-button-text-decoration, none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform, uppercase);position:relative}.mdc-tab .mdc-tab__text-label{color:rgba(0, 0, 0, 0.6)}.mdc-tab .mdc-tab__icon{color:rgba(0, 0, 0, 0.54);fill:currentColor}.mdc-tab__content{position:relative}.mdc-tab__icon{width:24px;height:24px;font-size:24px}.mdc-tab--active .mdc-tab__text-label{color:#6200ee;color:var(--mdc-theme-primary, #6200ee)}.mdc-tab--active .mdc-tab__icon{color:#6200ee;color:var(--mdc-theme-primary, #6200ee);fill:currentColor}.mdc-tab{background:none}.mdc-tab{min-width:90px;padding-right:24px;padding-left:24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;margin:0;padding-top:0;padding-bottom:0;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;-webkit-appearance:none;z-index:1}.mdc-tab::-moz-focus-inner{padding:0;border:0}.mdc-tab--min-width{flex:0 1 auto}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab__icon{transition:150ms color linear;z-index:2}.mdc-tab--stacked .mdc-tab__content{flex-direction:column;align-items:center;justify-content:center}.mdc-tab--stacked .mdc-tab__text-label{padding-top:6px;padding-bottom:4px}.mdc-tab--active .mdc-tab__text-label,.mdc-tab--active .mdc-tab__icon{transition-delay:100ms}.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label{padding-left:8px;padding-right:0}[dir=rtl] .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label,.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label[dir=rtl]{padding-left:0;padding-right:8px;}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-tab{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-tab .mdc-tab__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-tab .mdc-tab__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-tab.mdc-ripple-upgraded--unbounded .mdc-tab__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-tab.mdc-ripple-upgraded--foreground-activation .mdc-tab__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-tab.mdc-ripple-upgraded--foreground-deactivation .mdc-tab__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{background-color:#6200ee;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee))}.mdc-tab:hover .mdc-tab__ripple::before,.mdc-tab.mdc-ripple-surface--hover .mdc-tab__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-tab.mdc-ripple-upgraded--background-focused .mdc-tab__ripple::before,.mdc-tab:not(.mdc-ripple-upgraded):focus .mdc-tab__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-tab:not(.mdc-ripple-upgraded) .mdc-tab__ripple::after{transition:opacity 150ms linear}.mdc-tab:not(.mdc-ripple-upgraded):active .mdc-tab__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-tab.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-tab__ripple{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;will-change:transform, opacity}.scroll-fade,.scroll-button{position:absolute;transition-property:transform;transition-duration:0.3s;transition-timing-function:ease-out}.scroll-fade{top:0;height:100%;width:4rem;pointer-events:none}.scroll-fade.left{transform:translate3d(-4rem, 0, 0);left:0;background:linear-gradient(270deg, rgba(var(--contrast-300), 0) 0%, rgba(var(--contrast-300), 0.8) 40%, rgba(var(--contrast-300), 0.8) 100%)}.scroll-fade.right{transform:translate3d(4rem, 0, 0);right:0;background:linear-gradient(90deg, rgba(var(--contrast-300), 0) 0%, rgba(var(--contrast-300), 0.8) 40%, rgba(var(--contrast-300), 0.8) 100%)}.scroll-button{display:flex;align-items:center;top:0;bottom:0}.scroll-button.left{transform:translate3d(-4rem, 0, 0);left:0.25rem}.scroll-button.right{transform:translate3d(4rem, 0, 0);right:0.25rem}.scroll-button:hover{transform:translate3d(0, 0, 0)}.scroll-button button{all:unset;display:flex;align-items:center;justify-content:center;width:1.25rem;height:calc(100% - (0.25rem * 2));border-radius:0.25rem}.scroll-button button:not(:disabled){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.scroll-button button:not(:disabled):hover,.scroll-button button:not(:disabled):focus,.scroll-button button:not(:disabled):focus-visible{will-change:color, background-color, box-shadow, transform}.scroll-button button:not(:disabled):hover,.scroll-button button:not(:disabled):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.scroll-button button:not(:disabled):active{--limel-clickable-transform-timing-function:cubic-bezier(\n 0.83,\n -0.15,\n 0.49,\n 1.16\n );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.scroll-button button:not(:disabled):hover,.scroll-button button:not(:disabled):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.scroll-button limel-icon{width:1rem}.mdc-tab-scroller{position:relative;overflow:hidden}.mdc-tab-scroller.can-scroll-left .scroll-fade.left,.mdc-tab-scroller.can-scroll-left .scroll-button.left,.mdc-tab-scroller.can-scroll-right .scroll-fade.right,.mdc-tab-scroller.can-scroll-right .scroll-button.right{transform:translate3d(0, 0, 0)}.mdc-tab-scroller.can-scroll-left:not(.can-scroll-right) .scroll-button.right,.mdc-tab-scroller.can-scroll-right:not(.can-scroll-left) .scroll-button.left{opacity:0.5;transition-delay:0.5s}.lime-hide-scrollbars{scrollbar-width:none;-ms-overflow-style:none}.mdc-tab-scroller__scroll-content{padding:0.25rem 0.75rem 0 0.75rem;background-color:rgb(var(--contrast-300))}:host(limel-tab-bar){--limel-active-tab-background-color:var(\n --tab-panel-background-color,\n rgb(var(--contrast-100))\n );isolation:isolate;display:block;position:relative}:host(.has-tabs-with-equal-width) .mdc-tab{flex:1 0 auto}.mdc-tab{font-family:inherit;font-weight:400;letter-spacing:normal;font-size:var(--limel-theme-default-font-size);text-transform:none}.mdc-tab-indicator .mdc-tab-indicator__content{border:none}.mdc-tab__ripple{box-sizing:border-box;border-radius:0.625rem;border-style:solid;border-color:transparent;border-width:0.25rem;opacity:0.7}.mdc-tab__ripple:before,.mdc-tab__ripple:after{transition:background-color 0.5s ease}.mdc-tab{border-radius:0;padding-right:1rem;padding-left:1rem;min-width:2.5rem;background-color:transparent;flex:0 0 auto;height:2.5rem}.mdc-tab:not(.mdc-tab--active){--badge-background-color:rgb(var(--contrast-600))}.mdc-tab:not(.mdc-tab--active):after{content:\"\";display:block;background-color:rgb(var(--contrast-600));width:0.125rem;height:1rem;margin:auto;position:absolute;top:0;bottom:0;border-radius:1rem;right:-0.125rem}.mdc-tab:not(.mdc-tab--active):last-of-type:after{display:none}.mdc-tab .mdc-tab__icon{margin-left:-0.25rem}.mdc-tab limel-badge{margin-right:-0.25rem}.mdc-tab--active{border-radius:0.625rem 0.625rem 0 0;background-color:var(--limel-active-tab-background-color);z-index:2}.mdc-tab--active:before,.mdc-tab--active:after{content:\"\";display:block;width:0.75rem;height:0.75rem;position:absolute;bottom:0;background-color:var(--limel-active-tab-background-color);-webkit-mask-image:url(\"data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 50 50'><defs/><path d='M0 0c0 27.594 22.406 50 50 50H0V0z'/></svg>\");mask-image:url(\"data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 50 50'><defs/><path d='M0 0c0 27.594 22.406 50 50 50H0V0z'/></svg>\")}.mdc-tab--active:before{left:-0.75rem;transform:rotateY(180deg)}.mdc-tab--active:after{right:-0.75rem}.mdc-tab--active .mdc-ripple-upgraded--background-focused:before{background-color:transparent;transition:background-color 1s ease}.mdc-tab__content{gap:0.375rem}.mdc-tab .mdc-tab__text-label{transition:color 0.2s ease;padding-left:0 !important;color:var(--limel-theme-on-surface-color)}.mdc-tab:hover .mdc-tab__text-label{color:var(--limel-theme-text-primary-on-background-color)}.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--lime-primary-color, var(--limel-theme-primary-color))}";const{TAB_ACTIVATED_EVENT:ot}=q;const at=150;const ct=40;const st=100;const lt=20;const ut=class{constructor(e){t(this,e);this.changeTab=r(this,"changeTab",7);this.setupMdc=false;this.tabs=[];this.canScrollLeft=false;this.canScrollRight=false;this.handleTabActivated=this.handleTabActivated.bind(this);this.handleScroll=this.handleScroll.bind(this);this.handleLeftScrollClick=this.handleLeftScrollClick.bind(this);this.handleRightScrollClick=this.handleRightScrollClick.bind(this);this.renderTab=this.renderTab.bind(this)}connectedCallback(){this.setup()}componentDidLoad(){this.setup();this.triggerIconColorWarning()}componentDidUpdate(){if(!this.setupMdc){return}this.setup();this.setupMdc=false}disconnectedCallback(){this.tearDown()}render(){return e("div",{class:"mdc-tab-bar",role:"tablist"},e("div",{class:{"mdc-tab-scroller":true,"can-scroll-left":this.canScrollLeft,"can-scroll-right":this.canScrollRight}},e("div",{class:"mdc-tab-scroller__scroll-area lime-hide-scrollbars"},e("div",{class:"mdc-tab-scroller__scroll-content"},this.tabs.map(this.renderTab))),e("div",{class:"scroll-fade left"}),e("div",{class:"scroll-button left"},e("button",{type:"button",tabindex:"-1","aria-hidden":"true",disabled:!this.canScrollLeft,onClick:this.handleLeftScrollClick},e("limel-icon",{name:"angle_left"}))),e("div",{class:"scroll-fade right"}),e("div",{class:"scroll-button right"},e("button",{type:"button",tabindex:"-1","aria-hidden":"true",disabled:!this.canScrollRight,onClick:this.handleRightScrollClick},e("limel-icon",{name:"angle_right"})))))}tabsChanged(t=[],r=[]){const e=t.map((t=>t.id));const n=r.map((t=>t.id));if(a(e,n)){return}this.setupMdc=true;this.tearDown()}handleWindowResize(){if(!this.scrollArea){return}this.handleScroll()}setup(){const t=this.host.shadowRoot.querySelector(".mdc-tab-bar");if(!t){return}this.mdcTabBar=new et(t);this.mdcTabBar.focusOnActivate=true;this.mdcTabBar.useAutomaticActivation=true;this.scrollArea=t.querySelector(".mdc-tab-scroller__scroll-area");this.scrollContent=t.querySelector(".mdc-tab-scroller__scroll-content");this.setupListeners();setTimeout(this.handleScroll,0)}tearDown(){if(this.scrollArea){this.scrollArea.removeEventListener("scroll",this.handleScroll)}if(this.mdcTabBar){this.mdcTabBar.unlisten(ot,this.handleTabActivated);this.mdcTabBar.destroy()}}setupListeners(){this.mdcTabBar.listen(ot,this.handleTabActivated);this.scrollArea.addEventListener("scroll",this.handleScroll,{passive:true})}handleTabActivated(t){const r=t.detail.index;const e=nt(this.tabs,r);S(e,this.tabs).sort(this.sortByInactive).forEach((t=>{this.changeTab.emit(t)}));this.tabs=e}sortByInactive(t,r){return Number(t.active)-Number(r.active)}handleScroll(){const t=this.scrollArea.scrollLeft;const r=Math.floor(this.scrollContent.getBoundingClientRect().width-this.scrollArea.getBoundingClientRect().width-t);if(t>ct){this.canScrollLeft=true}else{this.canScrollLeft=false}if(r>ct){this.canScrollRight=true}else{this.canScrollRight=false}}handleLeftScrollClick(){const t=this.getScrollDistance();this.scrollArea.scroll({left:this.scrollArea.scrollLeft-t,behavior:"smooth"})}handleRightScrollClick(){const t=this.getScrollDistance();this.scrollArea.scroll({left:this.scrollArea.scrollLeft+t,behavior:"smooth"})}getScrollDistance(){if(!this.scrollArea){return at}const t=this.scrollArea.getBoundingClientRect().width;const r=t*(1-lt/st);return Math.max(r,at)}renderIcon(t){if(!t.icon){return}const r=i(t.icon);const n=o(t.icon,t.iconColor);const a={color:""};if(n){a.color=n}return e("limel-icon",{class:"mdc-tab__icon",name:r,style:a,size:"small","aria-hidden":"true"})}renderTab(t){return e("button",{class:{"mdc-tab":true,"mdc-tab--active":!!t.active},role:"tab","aria-selected":t.active?"true":"false",tabindex:t.active?0:-1},e("span",{class:"mdc-tab__content"},this.renderIcon(t),e("span",{class:"mdc-tab__text-label"},t.text),t.badge?e("limel-badge",{label:t.badge}):""),e("span",{class:{"mdc-tab-indicator":true,"mdc-tab-indicator--active":!!t.active}},e("span",{class:"mdc-tab-indicator__content mdc-tab-indicator__content--underline"})),e("span",{class:"mdc-tab__ripple"}))}triggerIconColorWarning(){if(this.tabs.some((t=>t.iconColor))){console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.")}}get host(){return n(this)}static get watchers(){return{tabs:["tabsChanged"]}}};ut.style=it;export{ut as limel_tab_bar};
|
|
420
|
-
//# sourceMappingURL=p-
|
|
419
|
+
*/var tt=$.strings;var rt=0;var et=function(t){c(r,t);function r(){return t!==null&&t.apply(this,arguments)||this}r.attachTo=function(t){return new r(t)};Object.defineProperty(r.prototype,"focusOnActivate",{set:function(t){var r,e;try{for(var n=h(this.tabList),i=n.next();!i.done;i=n.next()){var o=i.value;o.focusOnActivate=t}}catch(t){r={error:t}}finally{try{if(i&&!i.done&&(e=n.return))e.call(n)}finally{if(r)throw r.error}}},enumerable:false,configurable:true});Object.defineProperty(r.prototype,"useAutomaticActivation",{set:function(t){this.foundation.setUseAutomaticActivation(t)},enumerable:false,configurable:true});r.prototype.initialize=function(t,r){if(t===void 0){t=function(t){return new G(t)}}if(r===void 0){r=function(t){return new P(t)}}this.tabList=this.instantiateTabs(t);this.tabScroller=this.instantiatetabScroller(r)};r.prototype.initialSyncWithDOM=function(){var t=this;this.handleTabInteraction=function(r){t.foundation.handleTabInteraction(r)};this.handleKeyDown=function(r){t.foundation.handleKeyDown(r)};this.listen(U.strings.INTERACTED_EVENT,this.handleTabInteraction);this.listen("keydown",this.handleKeyDown);for(var r=0;r<this.tabList.length;r++){if(this.tabList[r].active){this.scrollIntoView(r);break}}};r.prototype.destroy=function(){var r,e;t.prototype.destroy.call(this);this.unlisten(U.strings.INTERACTED_EVENT,this.handleTabInteraction);this.unlisten("keydown",this.handleKeyDown);try{for(var n=h(this.tabList),i=n.next();!i.done;i=n.next()){var o=i.value;o.destroy()}}catch(t){r={error:t}}finally{try{if(i&&!i.done&&(e=n.return))e.call(n)}finally{if(r)throw r.error}}if(this.tabScroller){this.tabScroller.destroy()}};r.prototype.getDefaultFoundation=function(){var t=this;var r={scrollTo:function(r){t.tabScroller.scrollTo(r)},incrementScroll:function(r){t.tabScroller.incrementScroll(r)},getScrollPosition:function(){return t.tabScroller.getScrollPosition()},getScrollContentWidth:function(){return t.tabScroller.getScrollContentWidth()},getOffsetWidth:function(){return t.root.offsetWidth},isRTL:function(){return window.getComputedStyle(t.root).getPropertyValue("direction")==="rtl"},setActiveTab:function(r){t.foundation.activateTab(r)},activateTabAtIndex:function(r,e){t.tabList[r].activate(e)},deactivateTabAtIndex:function(r){t.tabList[r].deactivate()},focusTabAtIndex:function(r){t.tabList[r].focus()},getTabIndicatorClientRectAtIndex:function(r){return t.tabList[r].computeIndicatorClientRect()},getTabDimensionsAtIndex:function(r){return t.tabList[r].computeDimensions()},getPreviousActiveTabIndex:function(){for(var r=0;r<t.tabList.length;r++){if(t.tabList[r].active){return r}}return-1},getFocusedTabIndex:function(){var r=t.getTabElements();var e=document.activeElement;return r.indexOf(e)},getIndexOfTabById:function(r){for(var e=0;e<t.tabList.length;e++){if(t.tabList[e].id===r){return e}}return-1},getTabListLength:function(){return t.tabList.length},notifyTabActivated:function(r){return t.emit(tt.TAB_ACTIVATED_EVENT,{index:r},true)}};return new $(r)};r.prototype.activateTab=function(t){this.foundation.activateTab(t)};r.prototype.scrollIntoView=function(t){this.foundation.scrollIntoView(t)};r.prototype.getTabElements=function(){return[].slice.call(this.root.querySelectorAll(tt.TAB_SELECTOR))};r.prototype.instantiateTabs=function(t){return this.getTabElements().map((function(r){r.id=r.id||"mdc-tab-"+ ++rt;return t(r)}))};r.prototype.instantiatetabScroller=function(t){var r=this.root.querySelector(tt.TAB_SCROLLER_SELECTOR);if(r){return t(r)}return null};return r}(d);function nt(t,r){const e=t.findIndex((t=>t.active===true));const n=[...t];if(e!==-1){n[e]=Object.assign(Object.assign({},t[e]),{active:false})}n[r]=Object.assign(Object.assign({},t[r]),{active:true});return n}const it="@charset \"UTF-8\";.mdc-tab-bar{width:100%}.mdc-tab{height:48px}.mdc-tab--stacked{height:72px}.mdc-tab-scroller{overflow-y:hidden}.mdc-tab-scroller.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-content{transition:250ms transform cubic-bezier(0.4, 0, 0.2, 1)}.mdc-tab-scroller__test{position:absolute;top:-9999px;width:100px;height:100px;overflow-x:scroll}.mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:touch;display:flex;overflow-x:hidden}.mdc-tab-scroller__scroll-area::-webkit-scrollbar,.mdc-tab-scroller__test::-webkit-scrollbar{display:none}.mdc-tab-scroller__scroll-area--scroll{overflow-x:scroll}.mdc-tab-scroller__scroll-content{position:relative;display:flex;flex:1 0 auto;transform:none;will-change:transform}.mdc-tab-scroller--align-start .mdc-tab-scroller__scroll-content{justify-content:flex-start}.mdc-tab-scroller--align-end .mdc-tab-scroller__scroll-content{justify-content:flex-end}.mdc-tab-scroller--align-center .mdc-tab-scroller__scroll-content{justify-content:center}.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:auto}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-color:#6200ee;border-color:var(--mdc-theme-primary, #6200ee)}.mdc-tab-indicator .mdc-tab-indicator__content--icon{color:#018786;color:var(--mdc-theme-secondary, #018786)}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-top-width:2px}.mdc-tab-indicator .mdc-tab-indicator__content--icon{height:34px;font-size:34px}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator__content--icon{align-self:center;margin:0 auto}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}.mdc-tab-indicator .mdc-tab-indicator__content{transition:250ms transform cubic-bezier(0.4, 0, 0.2, 1)}.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition:150ms opacity linear}.mdc-tab-indicator--active.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition-delay:100ms}.mdc-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-button-font-size, 0.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight, 500);letter-spacing:0.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, 0.0892857143em);text-decoration:none;text-decoration:var(--mdc-typography-button-text-decoration, none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform, uppercase);position:relative}.mdc-tab .mdc-tab__text-label{color:rgba(0, 0, 0, 0.6)}.mdc-tab .mdc-tab__icon{color:rgba(0, 0, 0, 0.54);fill:currentColor}.mdc-tab__content{position:relative}.mdc-tab__icon{width:24px;height:24px;font-size:24px}.mdc-tab--active .mdc-tab__text-label{color:#6200ee;color:var(--mdc-theme-primary, #6200ee)}.mdc-tab--active .mdc-tab__icon{color:#6200ee;color:var(--mdc-theme-primary, #6200ee);fill:currentColor}.mdc-tab{background:none}.mdc-tab{min-width:90px;padding-right:24px;padding-left:24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;margin:0;padding-top:0;padding-bottom:0;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;-webkit-appearance:none;z-index:1}.mdc-tab::-moz-focus-inner{padding:0;border:0}.mdc-tab--min-width{flex:0 1 auto}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab__icon{transition:150ms color linear;z-index:2}.mdc-tab--stacked .mdc-tab__content{flex-direction:column;align-items:center;justify-content:center}.mdc-tab--stacked .mdc-tab__text-label{padding-top:6px;padding-bottom:4px}.mdc-tab--active .mdc-tab__text-label,.mdc-tab--active .mdc-tab__icon{transition-delay:100ms}.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label{padding-left:8px;padding-right:0}[dir=rtl] .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label,.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label[dir=rtl]{padding-left:0;padding-right:8px;}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-tab{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-tab .mdc-tab__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-tab .mdc-tab__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-tab.mdc-ripple-upgraded--unbounded .mdc-tab__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-tab.mdc-ripple-upgraded--foreground-activation .mdc-tab__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-tab.mdc-ripple-upgraded--foreground-deactivation .mdc-tab__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{background-color:#6200ee;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee))}.mdc-tab:hover .mdc-tab__ripple::before,.mdc-tab.mdc-ripple-surface--hover .mdc-tab__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-tab.mdc-ripple-upgraded--background-focused .mdc-tab__ripple::before,.mdc-tab:not(.mdc-ripple-upgraded):focus .mdc-tab__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-tab:not(.mdc-ripple-upgraded) .mdc-tab__ripple::after{transition:opacity 150ms linear}.mdc-tab:not(.mdc-ripple-upgraded):active .mdc-tab__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-tab.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-tab__ripple{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;will-change:transform, opacity}.scroll-fade,.scroll-button{position:absolute;transition-property:transform;transition-duration:0.3s;transition-timing-function:ease-out}.scroll-fade{top:0;height:100%;width:4rem;pointer-events:none}.scroll-fade.left{transform:translate3d(-4rem, 0, 0);left:0;background:linear-gradient(270deg, rgba(var(--contrast-300), 0) 0%, rgba(var(--contrast-300), 0.8) 40%, rgba(var(--contrast-300), 0.8) 100%)}.scroll-fade.right{transform:translate3d(4rem, 0, 0);right:0;background:linear-gradient(90deg, rgba(var(--contrast-300), 0) 0%, rgba(var(--contrast-300), 0.8) 40%, rgba(var(--contrast-300), 0.8) 100%)}.scroll-button{display:flex;align-items:center;top:0;bottom:0}.scroll-button.left{transform:translate3d(-4rem, 0, 0);left:0.25rem}.scroll-button.right{transform:translate3d(4rem, 0, 0);right:0.25rem}.scroll-button:hover{transform:translate3d(0, 0, 0)}.scroll-button button{all:unset;display:flex;align-items:center;justify-content:center;width:1.25rem;height:calc(100% - (0.25rem * 2));border-radius:0.25rem}.scroll-button button:not(:disabled){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.scroll-button button:not(:disabled):hover,.scroll-button button:not(:disabled):focus,.scroll-button button:not(:disabled):focus-visible{will-change:color, background-color, box-shadow, transform}.scroll-button button:not(:disabled):hover,.scroll-button button:not(:disabled):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.scroll-button button:not(:disabled):active{--limel-clickable-transform-timing-function:cubic-bezier(\n 0.83,\n -0.15,\n 0.49,\n 1.16\n );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.scroll-button button:not(:disabled):hover,.scroll-button button:not(:disabled):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.scroll-button limel-icon{width:1rem}.mdc-tab-scroller{position:relative;overflow:hidden}.mdc-tab-scroller.can-scroll-left .scroll-fade.left,.mdc-tab-scroller.can-scroll-left .scroll-button.left,.mdc-tab-scroller.can-scroll-right .scroll-fade.right,.mdc-tab-scroller.can-scroll-right .scroll-button.right{transform:translate3d(0, 0, 0)}.mdc-tab-scroller.can-scroll-left:not(.can-scroll-right) .scroll-button.right,.mdc-tab-scroller.can-scroll-right:not(.can-scroll-left) .scroll-button.left{opacity:0.5;transition-delay:0.5s}.lime-hide-scrollbars{scrollbar-width:none;-ms-overflow-style:none}.mdc-tab-scroller__scroll-content{padding:0.25rem 0.75rem 0 0.75rem;background-color:rgb(var(--contrast-300))}:host(limel-tab-bar){--limel-active-tab-background-color:var(\n --tab-panel-background-color,\n rgb(var(--contrast-100))\n );isolation:isolate;display:block;position:relative}:host(.has-tabs-with-equal-width) .mdc-tab{flex:1 0 auto}.mdc-tab{font-family:inherit;font-weight:400;letter-spacing:normal;font-size:var(--limel-theme-default-font-size);text-transform:none}.mdc-tab-indicator .mdc-tab-indicator__content{border:none}.mdc-tab__ripple{box-sizing:border-box;border-radius:0.625rem;border-style:solid;border-color:transparent;border-width:0.25rem;opacity:0.7}.mdc-tab__ripple:before,.mdc-tab__ripple:after{transition:background-color 0.5s ease}.mdc-tab{border-radius:0;padding-right:1rem;padding-left:1rem;min-width:2.5rem;background-color:transparent;flex:0 0 auto;height:2.5rem}.mdc-tab:not(.mdc-tab--active):after{content:\"\";display:block;background-color:rgb(var(--contrast-600));width:0.125rem;height:1rem;margin:auto;position:absolute;top:0;bottom:0;border-radius:1rem;right:-0.125rem}.mdc-tab:not(.mdc-tab--active):last-of-type:after{display:none}.mdc-tab .mdc-tab__icon{color:rgb(var(--contrast-800));margin-left:-0.25rem}.mdc-tab limel-badge{margin-right:-0.25rem;box-shadow:0 0 0 1px rgb(var(--contrast-600))}.mdc-tab--active{border-radius:0.625rem 0.625rem 0 0;background-color:var(--limel-active-tab-background-color);z-index:2}.mdc-tab--active:before,.mdc-tab--active:after{content:\"\";display:block;width:0.75rem;height:0.75rem;position:absolute;bottom:0;background-color:var(--limel-active-tab-background-color);-webkit-mask-image:url(\"data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 50 50'><defs/><path d='M0 0c0 27.594 22.406 50 50 50H0V0z'/></svg>\");mask-image:url(\"data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 50 50'><defs/><path d='M0 0c0 27.594 22.406 50 50 50H0V0z'/></svg>\")}.mdc-tab--active:before{left:-0.75rem;transform:rotateY(180deg)}.mdc-tab--active:after{right:-0.75rem}.mdc-tab--active .mdc-ripple-upgraded--background-focused:before{background-color:transparent;transition:background-color 1s ease}.mdc-tab--active .mdc-tab__icon{color:var(--mdc-theme-primary)}.mdc-tab__content{gap:0.375rem}.mdc-tab .mdc-tab__text-label{transition:color 0.2s ease;padding-left:0 !important;color:var(--limel-theme-on-surface-color)}.mdc-tab:hover .mdc-tab__text-label{color:var(--limel-theme-text-primary-on-background-color)}.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--lime-primary-color, var(--limel-theme-primary-color))}";const{TAB_ACTIVATED_EVENT:ot}=q;const at=150;const ct=40;const st=100;const lt=20;const ut=class{constructor(e){t(this,e);this.changeTab=r(this,"changeTab",7);this.setupMdc=false;this.tabs=[];this.canScrollLeft=false;this.canScrollRight=false;this.handleTabActivated=this.handleTabActivated.bind(this);this.handleScroll=this.handleScroll.bind(this);this.handleLeftScrollClick=this.handleLeftScrollClick.bind(this);this.handleRightScrollClick=this.handleRightScrollClick.bind(this);this.renderTab=this.renderTab.bind(this)}connectedCallback(){this.setup()}componentDidLoad(){this.setup();this.triggerIconColorWarning()}componentDidUpdate(){if(!this.setupMdc){return}this.setup();this.setupMdc=false}disconnectedCallback(){this.tearDown()}render(){return e("div",{class:"mdc-tab-bar",role:"tablist"},e("div",{class:{"mdc-tab-scroller":true,"can-scroll-left":this.canScrollLeft,"can-scroll-right":this.canScrollRight}},e("div",{class:"mdc-tab-scroller__scroll-area lime-hide-scrollbars"},e("div",{class:"mdc-tab-scroller__scroll-content"},this.tabs.map(this.renderTab))),e("div",{class:"scroll-fade left"}),e("div",{class:"scroll-button left"},e("button",{type:"button",tabindex:"-1","aria-hidden":"true",disabled:!this.canScrollLeft,onClick:this.handleLeftScrollClick},e("limel-icon",{name:"angle_left"}))),e("div",{class:"scroll-fade right"}),e("div",{class:"scroll-button right"},e("button",{type:"button",tabindex:"-1","aria-hidden":"true",disabled:!this.canScrollRight,onClick:this.handleRightScrollClick},e("limel-icon",{name:"angle_right"})))))}tabsChanged(t=[],r=[]){const e=t.map((t=>t.id));const n=r.map((t=>t.id));if(a(e,n)){return}this.setupMdc=true;this.tearDown()}handleWindowResize(){if(!this.scrollArea){return}this.handleScroll()}setup(){const t=this.host.shadowRoot.querySelector(".mdc-tab-bar");if(!t){return}this.mdcTabBar=new et(t);this.mdcTabBar.focusOnActivate=true;this.mdcTabBar.useAutomaticActivation=true;this.scrollArea=t.querySelector(".mdc-tab-scroller__scroll-area");this.scrollContent=t.querySelector(".mdc-tab-scroller__scroll-content");this.setupListeners();setTimeout(this.handleScroll,0)}tearDown(){if(this.scrollArea){this.scrollArea.removeEventListener("scroll",this.handleScroll)}if(this.mdcTabBar){this.mdcTabBar.unlisten(ot,this.handleTabActivated);this.mdcTabBar.destroy()}}setupListeners(){this.mdcTabBar.listen(ot,this.handleTabActivated);this.scrollArea.addEventListener("scroll",this.handleScroll,{passive:true})}handleTabActivated(t){const r=t.detail.index;const e=nt(this.tabs,r);S(e,this.tabs).sort(this.sortByInactive).forEach((t=>{this.changeTab.emit(t)}));this.tabs=e}sortByInactive(t,r){return Number(t.active)-Number(r.active)}handleScroll(){const t=this.scrollArea.scrollLeft;const r=Math.floor(this.scrollContent.getBoundingClientRect().width-this.scrollArea.getBoundingClientRect().width-t);if(t>ct){this.canScrollLeft=true}else{this.canScrollLeft=false}if(r>ct){this.canScrollRight=true}else{this.canScrollRight=false}}handleLeftScrollClick(){const t=this.getScrollDistance();this.scrollArea.scroll({left:this.scrollArea.scrollLeft-t,behavior:"smooth"})}handleRightScrollClick(){const t=this.getScrollDistance();this.scrollArea.scroll({left:this.scrollArea.scrollLeft+t,behavior:"smooth"})}getScrollDistance(){if(!this.scrollArea){return at}const t=this.scrollArea.getBoundingClientRect().width;const r=t*(1-lt/st);return Math.max(r,at)}renderIcon(t){if(!t.icon){return}const r=i(t.icon);const n=o(t.icon,t.iconColor);const a={color:""};if(n){a.color=n}return e("limel-icon",{class:"mdc-tab__icon",name:r,style:a,size:"small","aria-hidden":"true"})}renderTab(t){return e("button",{class:{"mdc-tab":true,"mdc-tab--active":!!t.active},role:"tab","aria-selected":t.active?"true":"false",tabindex:t.active?0:-1},e("span",{class:"mdc-tab__content"},this.renderIcon(t),e("span",{class:"mdc-tab__text-label"},t.text),t.badge?e("limel-badge",{label:t.badge}):""),e("span",{class:{"mdc-tab-indicator":true,"mdc-tab-indicator--active":!!t.active}},e("span",{class:"mdc-tab-indicator__content mdc-tab-indicator__content--underline"})),e("span",{class:"mdc-tab__ripple"}))}triggerIconColorWarning(){if(this.tabs.some((t=>t.iconColor))){console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.")}}get host(){return n(this)}static get watchers(){return{tabs:["tabsChanged"]}}};ut.style=it;export{ut as limel_tab_bar};
|
|
420
|
+
//# sourceMappingURL=p-407a0e61.entry.js.map
|