@limetech/lime-elements 36.4.0 → 37.0.0-dev.1

package/dist/esm/limel-tab-panel.entry.js.map

@@ -0,0 +1 @@
+{"file":"limel-tab-panel.entry.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,+UAA+U;;MCoCtV,QAAQ;EAkBjB;;;IAFQ,iBAAY,GAAkB,EAAE,CAAC;gBAXpB,EAAE;IAcnB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACpD;EAEM,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAEO,UAAU;IACd,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IAC1D,IAAI,CAAC,eAAe,EAAE,CAAC;IACvB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GACxC;EAEM,oBAAoB;IACvB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;GAChE;EAGM,WAAW;IACd,IAAI,CAAC,UAAU,EAAE,CAAC;IAClB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GACxC;EAEM,MAAM;IACT,QACI,EAAC,IAAI,IAAC,WAAW,EAAE,IAAI,CAAC,gBAAgB,IACpC,WAAK,KAAK,EAAC,WAAW,IAClB,qBAAe,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EAClC,WAAK,KAAK,EAAC,aAAa,IACpB,eAAQ,CACN,CACJ,CACH,EACT;GACL;EAEO,eAAe;IACnB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,UAAU,EAAE,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;IAC3D,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GACxC;EAEO,YAAY,CAAC,GAAQ;IACzB,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC;IAC/D,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;IAED,IAAI,GAAG,CAAC,MAAM,EAAE;MACZ,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;KAC9B;SAAM;MACH,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;KAClC;IAED,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC;GACxB;EAEO,gBAAgB,CAAC,KAAuB;IAC5C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG;MAC1B,IAAI,GAAG,CAAC,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE;QAC5B,OAAO,KAAK,CAAC,MAAM,CAAC;OACvB;MAED,OAAO,GAAG,CAAC;KACd,CAAC,CAAC;IAEH,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;;;IAIhC,UAAU,CAAC,mBAAmB,CAAC,CAAC;GACnC;EAEO,OAAO;IACX,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;GACrD;EAEO,UAAU;IACd,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO;MAC9B,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;KAClC,CAAC,CAAC;GACN;;;;;;;;;;","names":[],"sources":["./src/components/tab-panel/tab-panel.scss?tag=limel-tab-panel&encapsulation=shadow","./src/components/tab-panel/tab-panel.tsx"],"sourcesContent":["/**\n* @prop --tab-panel-background-color: Background color of the contents of the tab and the active tab of the tab bar. Defaults to `--contrast-100`.\n*/\n\n:host(limel-tab-panel) {\n    --tab-panel-background-color: rgb(var(--contrast-100));\n    display: block;\n    height: 100%;\n}\n\n.tab-panel {\n    // contains both limel-tab-bar and tab-content\n    height: 100%;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n}\n\n.tab-content {\n    height: 100%;\n    flex: 1;\n    overflow-y: auto;\n    -webkit-overflow-scrolling: touch;\n    box-sizing: border-box;\n    background-color: var(--tab-panel-background-color);\n}\n","import {\n    Component,\n    Element,\n    h,\n    Prop,\n    EventEmitter,\n    Event,\n    Host,\n    Watch,\n} from '@stencil/core';\nimport { Tab } from '../tab-bar/tab.types';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\n\n/**\n * The `limel-tab-panel` component uses the `limel-tab-bar` component together\n * with custom slotted components and will display the content for the currently\n * active tab. Each slotted component must have an id equal to the id of the\n * corresponding tab it belongs to. These components should implement the\n * [TabPanelComponent](#/type/TabPanelComponent/) interface.\n *\n * The `limel-tab-panel` component will automatically set each tab configuration\n * on the corresponding slotted component as a property named `tab` so that the\n * component can take action upon that. Sometimes it might be desirable to not\n * load data or render anything until the tab is active.\n *\n * The slotted components can also emit the `changeTab` event to update anything\n * inside the actual tab, e.g. to change the icon, color or badge.\n * @slot - Content to put inside the `limel-tab-panel`. Each slotted element\n * must have the `id` attribute equal to the id of the tab it belongs to.\n * @exampleComponent limel-example-tab-panel\n */\n@Component({\n    tag: 'limel-tab-panel',\n    styleUrl: 'tab-panel.scss',\n    shadow: true,\n})\nexport class TabPanel {\n    /**\n     * The tabs to display in the panel\n     */\n    @Prop({ mutable: true })\n    public tabs: Tab[] = [];\n\n    /**\n     * Emitted when a tab has been changed\n     */\n    @Event()\n    protected changeTab: EventEmitter<Tab>;\n\n    @Element()\n    private host: HTMLLimelTabPanelElement;\n\n    private slotElements: HTMLElement[] = [];\n\n    constructor() {\n        this.handleChangeTabs = this.handleChangeTabs.bind(this);\n        this.setSlotElements = this.setSlotElements.bind(this);\n        this.setTabStatus = this.setTabStatus.bind(this);\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const slot = this.getSlot();\n        if (!slot) {\n            return;\n        }\n\n        slot.addEventListener('slotchange', this.setSlotElements);\n        this.setSlotElements();\n        this.tabs.forEach(this.setTabStatus);\n    }\n\n    public disconnectedCallback() {\n        const slot = this.getSlot();\n        slot.removeEventListener('slotchange', this.setSlotElements);\n    }\n\n    @Watch('tabs')\n    public tabsChanged() {\n        this.hidePanels();\n        this.tabs.forEach(this.setTabStatus);\n    }\n\n    public render() {\n        return (\n            <Host onChangeTab={this.handleChangeTabs}>\n                <div class=\"tab-panel\">\n                    <limel-tab-bar tabs={this.tabs} />\n                    <div class=\"tab-content\">\n                        <slot />\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n\n    private setSlotElements() {\n        const slot = this.getSlot();\n        this.hidePanels();\n        this.slotElements = [].slice.call(slot.assignedElements());\n        this.tabs.forEach(this.setTabStatus);\n    }\n\n    private setTabStatus(tab: Tab) {\n        const element = this.slotElements.find((e) => e.id === tab.id);\n        if (!element) {\n            return;\n        }\n\n        if (tab.active) {\n            element.style.display = '';\n        } else {\n            element.style.display = 'none';\n        }\n\n        element['tab'] = tab; // eslint-disable-line @typescript-eslint/dot-notation\n    }\n\n    private handleChangeTabs(event: CustomEvent<Tab>) {\n        this.tabs = this.tabs.map((tab) => {\n            if (tab.id === event.detail.id) {\n                return event.detail;\n            }\n\n            return tab;\n        });\n\n        this.setTabStatus(event.detail);\n\n        // Content inside the newly activated tab may need to redraw once\n        // visible, so we use the resize event trick. /Ads\n        setTimeout(dispatchResizeEvent);\n    }\n\n    private getSlot(): HTMLSlotElement {\n        return this.host.shadowRoot.querySelector('slot');\n    }\n\n    private hidePanels() {\n        this.slotElements.forEach((element) => {\n            element.style.display = 'none';\n        });\n    }\n}\n"],"version":3}

package/dist/esm/limel-table.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-cdfd351d.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9bd6d7c6.js';
 import { p as pickBy, n as negate, h as has } from './pickBy-d359eb12.js';
 import { i as isEqual } from './isEqual-c5a636a4.js';
 import './identity-87aa3962.js';
@@ -24558,3 +24558,5 @@ const Table = class {
 Table.style = tableCss;
 
 export { Table as limel_table };
+
+//# sourceMappingURL=limel-table.entry.js.map