@paperless/core 0.1.0-alpha.93 → 0.1.0-alpha.96

package/dist/collection/components/molecules/content-slider/content-slider.component.css

@@ -1,27 +1,26 @@
 :host {
-  @apply flex flex-col gap-4;
-  @apply -mx-4;
+  @apply flex flex-col gap-4 overflow-hidden;
+  @apply p-10 -m-10;
 }
-:host .content {
-  @apply flex flex-nowrap items-stretch overflow-x-auto gap-2 relative;
-  @apply tablet:gap-4 desktop-xs:flex-wrap;
-  @apply p-4 -my-4;
+:host .slider {
+  @apply overflow-visible relative box-content;
 }
-:host .content.draggable {
+:host .slider.draggable {
   @apply cursor-grab desktop-xs:cursor-default;
 }
-:host .content.draggable.dragging {
+:host .slider.draggable.dragging {
   @apply cursor-grabbing desktop-xs:cursor-default;
 }
-:host .content > ::slotted(*) {
+:host .slider .inner-slider {
+  @apply absolute flex flex-nowrap items-stretch w-full gap-2;
+  @apply tablet:gap-4 desktop-xs:flex-wrap;
+}
+:host .slider .inner-slider > ::slotted(*) {
   @apply w-full tablet:w-[45%] desktop-xs:w-full;
   @apply flex-shrink-0 desktop-xs:flex-1;
   position: relative;
   z-index: 10;
 }
-:host .content::-webkit-scrollbar {
-  display: none;
-}
 :host .indicator {
   @apply flex justify-center items-center gap-2 desktop-xs:hidden;
-} .visible{visibility:visible!important}.static{position:static!important}.hidden{display:none!important}.cursor-pointer{cursor:pointer!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}
+} .visible{visibility:visible!important}.static{position:static!important}.hidden{display:none!important}.cursor-pointer{cursor:pointer!important}.resize{resize:both!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}

package/dist/collection/components/molecules/content-slider/content-slider.component.js

@@ -1,4 +1,4 @@
-import { Component, Element, h, Host, Listen, Prop, State, } from '@stencil/core';
+import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';
 export class ContentSlider {
   constructor() {
     /**
@@ -13,22 +13,32 @@ export class ContentSlider {
      * Wether to disable clicking the indicator scrolls content
      */
     this.disableIndicatorClick = false;
+    this._outerHeight = 0;
+    this._totalWidth = 0;
     this._items = [];
-    // mouse movement stuff
-    this._pos = { top: 0, left: 0, x: 0, y: 0 };
     this._dragging = false;
   }
   componentWillRender() {
     const items = this._el.querySelectorAll(':scope > *');
     this._items = Array.from(items);
   }
+  componentDidRender() {
+    const outerHeight = this._items.at(0).getBoundingClientRect().height;
+    if (outerHeight != this._outerHeight) {
+      this._outerHeight = outerHeight;
+    }
+  }
   componentDidLoad() {
+    this._calculateWidth();
     this._calculateIndicator();
   }
   render() {
     return (h(Host, { class: "p-content-slider" },
-      h("div", { class: `content ${!this.disableDrag && 'draggable'} ${this._dragging && 'dragging'}`, ref: (el) => (this._contentRef = el), onScroll: () => this._handleScroll(), onMouseDown: (e) => this._mouseDownHandler(e) },
-        h("slot", null)),
+      h("div", { class: `slider ${!this.disableDrag && 'draggable'} ${this._dragging && 'dragging'}`, style: {
+          height: `${this._outerHeight}px`,
+        }, ref: (el) => (this._sliderRef = el), onScroll: () => this._handleScroll(), onMouseDown: (e) => this._mouseDownHandler(e), onMouseMove: (e) => this._mouseMoveHandler(e) },
+        h("div", { class: "inner-slider", ref: (ref) => (this._innerSliderRef = ref) },
+          h("slot", null))),
       h("div", { class: `indicator ${this.hideMobileIndicator && 'hidden'}` }, this._items.map((_, i) => (h("p-slider-indicator", { class: !this.disableIndicatorClick && 'cursor-pointer', onClick: () => this._scrollTo(i), active: i === this._visibleIndex }))))));
   }
   _handleScroll() {
@@ -41,30 +51,37 @@ export class ContentSlider {
     if (this.disableDrag || this._dragging) {
       return;
     }
-    this._pos = {
-      // The current scroll
-      left: this._contentRef.scrollLeft,
-      top: this._contentRef.scrollTop,
-      // Get the current mouse position
-      x: e.clientX,
-      y: e.clientY,
-    };
+    this._startX = e.offsetX - this._innerSliderRef.offsetLeft;
     this._dragging = true;
   }
-  mouseMoveHandler(e) {
+  _mouseMoveHandler(e) {
     if (!e || !this._dragging || this.disableDrag) {
       return;
     }
-    // How far the mouse has been moved
-    const dx = e.clientX - this._pos.x;
-    const dy = e.clientY - this._pos.y;
-    // Scroll the element
-    this._contentRef.scrollTop = this._pos.top - dy;
-    this._contentRef.scrollLeft = this._pos.left - dx;
+    e.preventDefault();
+    const x = e.offsetX;
+    this._innerSliderRef.style.left = `${x - this._startX}px`;
+    this._checkBoundary();
+    this._calculateIndicator();
+  }
+  _checkBoundary() {
+    let outer = this._sliderRef.getBoundingClientRect();
+    if (parseInt(this._innerSliderRef.style.left) > 0) {
+      this._innerSliderRef.style.left = '0px';
+    }
+    const maxLeft = (this._totalWidth - outer.width) * -1;
+    if (parseInt(this._innerSliderRef.style.left) < maxLeft) {
+      this._innerSliderRef.style.left = `${maxLeft}px`;
+    }
   }
   mouseUpHandler() {
     this._dragging = false;
   }
+  resizeHandler() {
+    this._innerSliderRef.style.left = '0px';
+    this._calculateWidth();
+    this._calculateIndicator();
+  }
   _calculateIndicator() {
     for (let i = 0; i < this._items.length; i++) {
       const item = this._items[i];
@@ -78,28 +95,42 @@ export class ContentSlider {
     }
   }
   _isVisible(el) {
-    if (!this._el || !this._contentRef || !el) {
+    if (!this._el || !el) {
       return false;
     }
     const elRect = el.getBoundingClientRect();
-    const containerRect = this._el.getBoundingClientRect();
-    return (elRect.left > containerRect.left &&
-      elRect.right < containerRect.right);
+    const sliderRect = this._sliderRef.getBoundingClientRect();
+    return (elRect.left >= sliderRect.left && elRect.right <= sliderRect.right);
   }
   _scrollTo(i) {
     if (this.disableIndicatorClick) {
       return;
     }
     const el = this._items[i];
-    const parent = el.offsetParent;
-    const parentStyle = getComputedStyle(parent);
-    const gap = parseInt(parentStyle.gap.replace('px', ''));
-    const padding = parseInt(parentStyle['paddingLeft'].replace('px', '')) +
-      parseInt(parentStyle['paddingRight'].replace('px', ''));
-    this._contentRef.scrollTo({
-      left: el.offsetLeft - gap - padding - el.clientWidth / 2,
-      behavior: 'smooth',
-    });
+    if (i === 0) {
+      this._innerSliderRef.style.left = '0px';
+      this._calculateIndicator();
+      return;
+    }
+    const sliderRect = this._sliderRef.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    const centerOffset = el.offsetLeft + elRect.width / 2 - sliderRect.width / 2;
+    this._innerSliderRef.style.left = `-${centerOffset}px`;
+    this._checkBoundary();
+    this._calculateIndicator();
+  }
+  _calculateWidth() {
+    let totalWidth = 0;
+    for (let item of this._items) {
+      const rect = item.getBoundingClientRect();
+      totalWidth += rect.width;
+    }
+    const sliderStyle = getComputedStyle(this._sliderRef);
+    const padding = parseInt(sliderStyle.padding) * 2;
+    const innerSliderStyle = getComputedStyle(this._innerSliderRef);
+    const gap = parseInt(innerSliderStyle.gap) * (this._items.length - 1);
+    totalWidth += padding + gap;
+    this._totalWidth = totalWidth;
   }
   static get is() { return "p-content-slider"; }
   static get encapsulation() { return "shadow"; }
@@ -167,18 +198,20 @@ export class ContentSlider {
   }; }
   static get states() { return {
     "_visibleIndex": {},
+    "_outerHeight": {},
+    "_totalWidth": {},
     "_dragging": {}
   }; }
   static get elementRef() { return "_el"; }
   static get listeners() { return [{
-      "name": "mousemove",
-      "method": "mouseMoveHandler",
+      "name": "mouseup",
+      "method": "mouseUpHandler",
       "target": "window",
       "capture": false,
       "passive": true
     }, {
-      "name": "mouseup",
-      "method": "mouseUpHandler",
+      "name": "resize",
+      "method": "resizeHandler",
       "target": "window",
       "capture": false,
       "passive": true

package/dist/collection/components/molecules/dropdown/dropdown.component.css

@@ -9,4 +9,4 @@
 }
 :host p-dropdown-menu-container[data-show] {
   @apply flex;
-} .static{position:static!important}.absolute{position:absolute!important}.ml-auto{margin-left:auto!important}.flex{display:flex!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}*{box-sizing:border-box}.visible{visibility:visible!important}.fixed{position:fixed!important}*{box-sizing:border-box}.visible{visibility:visible!important}.fixed{position:fixed!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}
+} .static{position:static!important}.absolute{position:absolute!important}.ml-auto{margin-left:auto!important}.flex{display:flex!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}*{box-sizing:border-box}.visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}

package/dist/collection/components/molecules/profile/profile.component.css

@@ -33,4 +33,4 @@
 
 :host(.active) .content p-icon {
   @apply text-indigo;
-} .static{position:static!important}.absolute{position:absolute!important}.ml-auto{margin-left:auto!important}.flex{display:flex!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}*{box-sizing:border-box}.visible{visibility:visible!important}.fixed{position:fixed!important}*{box-sizing:border-box}
+} .static{position:static!important}.absolute{position:absolute!important}.ml-auto{margin-left:auto!important}.flex{display:flex!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}*{box-sizing:border-box}

package/dist/components/avatar.component.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const avatarComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.ml-auto{margin-left:auto!important}.flex{display:flex!important}.w-8{width:2rem!important}.w-\\[3\\.125rem\\]{width:3.125rem!important}.w-16{width:4rem!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.rounded{border-radius:.25rem!important}.object-cover{-o-object-fit:cover!important;object-fit:cover!important}*{box-sizing:border-box}p-avatar{display:inline-block}p-avatar>img{-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}p-avatar[size=small]>img{height:2rem;width:2rem}p-avatar[size=medium]>img{height:3.125rem;width:3.125rem}p-avatar[size=large]>img{height:4rem;width:4rem}p-avatar[variant=company]>img{border-radius:.25rem}p-avatar[variant=company][size=large]>img,p-avatar[variant=company][size=medium]>img{border-radius:.375rem}p-avatar[variant=user]>img{border-radius:100%}";
+const avatarComponentCss = ".static{position:static!important}.absolute{position:absolute!important}.ml-auto{margin-left:auto!important}.flex{display:flex!important}.w-8{width:2rem!important}.w-\\[3\\.125rem\\]{width:3.125rem!important}.w-16{width:4rem!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.rounded{border-radius:.25rem!important}.object-cover{-o-object-fit:cover!important;object-fit:cover!important}*{box-sizing:border-box}p-avatar{display:inline-block}p-avatar>img{-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}p-avatar[size=small]>img{height:2rem;width:2rem}p-avatar[size=medium]>img{height:3.125rem;width:3.125rem}p-avatar[size=large]>img{height:4rem;width:4rem}p-avatar[variant=company]>img{border-radius:.25rem}p-avatar[variant=company][size=large]>img,p-avatar[variant=company][size=medium]>img{border-radius:.375rem}p-avatar[variant=user]>img{border-radius:100%}";
 
 const Avatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/index.d.ts

@@ -1,46 +1,46 @@
 /* paperless custom elements */
-export { Accordion as PAccordion } from '../types/components/p-accordion/p-accordion';
-export { Avatar as PAvatar } from '../types/components/p-avatar/p-avatar';
-export { AvatarGroup as PAvatarGroup } from '../types/components/p-avatar-group/p-avatar-group';
-export { Button as PButton } from '../types/components/p-button/p-button';
-export { CardBody as PCardBody } from '../types/components/p-card-body/p-card-body';
-export { CardContainer as PCardContainer } from '../types/components/p-card-container/p-card-container';
-export { CardHeader as PCardHeader } from '../types/components/p-card-header/p-card-header';
-export { ContentSlider as PContentSlider } from '../types/components/p-content-slider/p-content-slider';
-export { Counter as PCounter } from '../types/components/p-counter/p-counter';
-export { Divider as PDivider } from '../types/components/p-divider/p-divider';
-export { Dropdown as PDropdown } from '../types/components/p-dropdown/p-dropdown';
-export { DropdownMenuContainer as PDropdownMenuContainer } from '../types/components/p-dropdown-menu-container/p-dropdown-menu-container';
-export { DropdownMenuItem as PDropdownMenuItem } from '../types/components/p-dropdown-menu-item/p-dropdown-menu-item';
-export { Helper as PHelper } from '../types/components/p-helper/p-helper';
-export { Icon as PIcon } from '../types/components/p-icon/p-icon';
-export { Illustration as PIllustration } from '../types/components/p-illustration/p-illustration';
-export { InfoPanel as PInfoPanel } from '../types/components/p-info-panel/p-info-panel';
-export { InputGroup as PInputGroup } from '../types/components/p-input-group/p-input-group';
-export { Layout as PLayout } from '../types/components/p-layout/p-layout';
-export { Loader as PLoader } from '../types/components/p-loader/p-loader';
-export { Modal as PModal } from '../types/components/p-modal/p-modal';
-export { ModalBackdrop as PModalBackdrop } from '../types/components/p-modal-backdrop/p-modal-backdrop';
-export { ModalBody as PModalBody } from '../types/components/p-modal-body/p-modal-body';
-export { ModalContainer as PModalContainer } from '../types/components/p-modal-container/p-modal-container';
-export { ModalFooter as PModalFooter } from '../types/components/p-modal-footer/p-modal-footer';
-export { ModalHeader as PModalHeader } from '../types/components/p-modal-header/p-modal-header';
-export { Navbar as PNavbar } from '../types/components/p-navbar/p-navbar';
-export { NavigationItem as PNavigationItem } from '../types/components/p-navigation-item/p-navigation-item';
-export { Pagination as PPagination } from '../types/components/p-pagination/p-pagination';
-export { PaginationItem as PPaginationItem } from '../types/components/p-pagination-item/p-pagination-item';
-export { Profile as PProfile } from '../types/components/p-profile/p-profile';
-export { SegmentContainer as PSegmentContainer } from '../types/components/p-segment-container/p-segment-container';
-export { SegmentItem as PSegmentItem } from '../types/components/p-segment-item/p-segment-item';
-export { SliderIndicator as PSliderIndicator } from '../types/components/p-slider-indicator/p-slider-indicator';
-export { Status as PStatus } from '../types/components/p-status/p-status';
-export { Stepper as PStepper } from '../types/components/p-stepper/p-stepper';
-export { StepperItem as PStepperItem } from '../types/components/p-stepper-item/p-stepper-item';
-export { StepperLine as PStepperLine } from '../types/components/p-stepper-line/p-stepper-line';
-export { TabGroup as PTabGroup } from '../types/components/p-tab-group/p-tab-group';
-export { TabItem as PTabItem } from '../types/components/p-tab-item/p-tab-item';
-export { Tag as PTag } from '../types/components/p-tag/p-tag';
-export { Tooltip as PTooltip } from '../types/components/p-tooltip/p-tooltip';
+export { Accordion as PAccordion } from '../types/components/molecules/accordion/accordion.component';
+export { Avatar as PAvatar } from '../types/components/atoms/avatar/avatar.component';
+export { AvatarGroup as PAvatarGroup } from '../types/components/atoms/avatar-group/avatar-group.component';
+export { Button as PButton } from '../types/components/atoms/button/button.component';
+export { CardBody as PCardBody } from '../types/components/atoms/card-body/card-body.component';
+export { CardContainer as PCardContainer } from '../types/components/atoms/card-container/card-container.component';
+export { CardHeader as PCardHeader } from '../types/components/atoms/card-header/card-header.component';
+export { ContentSlider as PContentSlider } from '../types/components/molecules/content-slider/content-slider.component';
+export { Counter as PCounter } from '../types/components/atoms/counter/counter.component';
+export { Divider as PDivider } from '../types/components/atoms/divider/divider.component';
+export { Dropdown as PDropdown } from '../types/components/molecules/dropdown/dropdown.component';
+export { DropdownMenuContainer as PDropdownMenuContainer } from '../types/components/atoms/dropdown-menu-container/dropdown-menu-container.component';
+export { DropdownMenuItem as PDropdownMenuItem } from '../types/components/atoms/dropdown-menu-item/dropdown-menu-item.component';
+export { Helper as PHelper } from '../types/components/atoms/helper/helper.component';
+export { Icon as PIcon } from '../types/components/atoms/icon/icon.component';
+export { Illustration as PIllustration } from '../types/components/atoms/illustration/illustration.component';
+export { InfoPanel as PInfoPanel } from '../types/components/atoms/info-panel/info-panel.component';
+export { InputGroup as PInputGroup } from '../types/components/molecules/input-group/input-group.component';
+export { Layout as PLayout } from '../types/components/atoms/layout/layout.component';
+export { Loader as PLoader } from '../types/components/atoms/loader/loader.component';
+export { Modal as PModal } from '../types/components/organisms/modal/modal.component';
+export { ModalBackdrop as PModalBackdrop } from '../types/components/atoms/modal-backdrop/modal-backdrop.component';
+export { ModalBody as PModalBody } from '../types/components/atoms/modal-body/modal-body.component';
+export { ModalContainer as PModalContainer } from '../types/components/atoms/modal-container/modal-container.component';
+export { ModalFooter as PModalFooter } from '../types/components/atoms/modal-footer/modal-footer.component';
+export { ModalHeader as PModalHeader } from '../types/components/atoms/modal-header/modal-header.component';
+export { Navbar as PNavbar } from '../types/components/organisms/navbar/navbar.component';
+export { NavigationItem as PNavigationItem } from '../types/components/molecules/navigation-item/navigation-item.component';
+export { Pagination as PPagination } from '../types/components/molecules/pagination/pagination.component';
+export { PaginationItem as PPaginationItem } from '../types/components/atoms/pagination-item/pagination-item.component';
+export { Profile as PProfile } from '../types/components/molecules/profile/profile.component';
+export { SegmentContainer as PSegmentContainer } from '../types/components/atoms/segment-container/segment-container.component';
+export { SegmentItem as PSegmentItem } from '../types/components/atoms/segment-item/segment-item.component';
+export { SliderIndicator as PSliderIndicator } from '../types/components/atoms/slider-indicator/slider-indicator.component';
+export { Status as PStatus } from '../types/components/atoms/status/status.component';
+export { Stepper as PStepper } from '../types/components/molecules/stepper/stepper.component';
+export { StepperItem as PStepperItem } from '../types/components/atoms/stepper-item/stepper-item.component';
+export { StepperLine as PStepperLine } from '../types/components/atoms/stepper-line/stepper-line.component';
+export { TabGroup as PTabGroup } from '../types/components/atoms/tab-group/tab-group.component';
+export { TabItem as PTabItem } from '../types/components/atoms/tab-item/tab-item.component';
+export { Tag as PTag } from '../types/components/atoms/tag/tag.component';
+export { Tooltip as PTooltip } from '../types/components/atoms/tooltip/tooltip.component';
 
 /**
  * Used to manually set the base path where assets can be found.

package/dist/components/p-content-slider.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './slider-indicator.component.js';
 
-const contentSliderComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.relative{position:relative!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!important}.flex-shrink-0{flex-shrink:0!important}.cursor-grab{cursor:-webkit-grab!important;cursor:grab!important}.cursor-grabbing{cursor:-webkit-grabbing!important;cursor:grabbing!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.flex-nowrap{flex-wrap:nowrap!important}.items-center{align-items:center!important}.items-stretch{align-items:stretch!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.overflow-x-auto{overflow-x:auto!important}.p-4{padding:1rem!important}*{box-sizing:border-box}:host{display:flex;flex-direction:column;gap:1rem;margin-left:-1rem;margin-right:-1rem}:host .content{align-items:stretch;display:flex;flex-wrap:nowrap;gap:.5rem;margin-bottom:-1rem;margin-top:-1rem;overflow-x:auto;padding:1rem;position:relative}@media (min-width:40rem){:host .content{gap:1rem}}@media (min-width:64rem){:host .content{flex-wrap:wrap}}:host .content.draggable{cursor:-webkit-grab;cursor:grab}@media (min-width:64rem){:host .content.draggable{cursor:default}}:host .content.draggable.dragging{cursor:-webkit-grabbing;cursor:grabbing}@media (min-width:64rem){:host .content.draggable.dragging{cursor:default}}:host .content>::slotted(*){flex-shrink:0;position:relative;width:100%;z-index:10}@media (min-width:40rem){:host .content>::slotted(*){width:45%}}@media (min-width:64rem){:host .content>::slotted(*){flex:1 1 0%;width:100%}}:host .content::-webkit-scrollbar{display:none}:host .indicator{align-items:center;display:flex;gap:.5rem;justify-content:center}@media (min-width:64rem){:host .indicator{display:none}}@media (min-width:40rem){.tablet\\:w-\\[45\\%\\]{width:45%!important}.tablet\\:gap-4{gap:1rem!important}}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}}";
+const contentSliderComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.absolute{position:absolute!important}.relative{position:relative!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!important}.flex-shrink-0{flex-shrink:0!important}.cursor-grab{cursor:-webkit-grab!important;cursor:grab!important}.cursor-grabbing{cursor:-webkit-grabbing!important;cursor:grabbing!important}.cursor-pointer{cursor:pointer!important}.resize{resize:both!important}.flex-col{flex-direction:column!important}.flex-nowrap{flex-wrap:nowrap!important}.items-center{align-items:center!important}.items-stretch{align-items:stretch!important}.justify-center{justify-content:center!important}.gap-4{gap:1rem!important}.gap-2{gap:.5rem!important}.overflow-visible{overflow:visible!important}.p-10{padding:2.5rem!important}*{box-sizing:border-box}:host{display:flex;flex-direction:column;gap:1rem;margin:-2.5rem;overflow:hidden;padding:2.5rem}:host .slider{box-sizing:content-box;overflow:visible;position:relative}:host .slider.draggable{cursor:-webkit-grab;cursor:grab}@media (min-width:64rem){:host .slider.draggable{cursor:default}}:host .slider.draggable.dragging{cursor:-webkit-grabbing;cursor:grabbing}@media (min-width:64rem){:host .slider.draggable.dragging{cursor:default}}:host .slider .inner-slider{align-items:stretch;display:flex;flex-wrap:nowrap;gap:.5rem;position:absolute;width:100%}@media (min-width:40rem){:host .slider .inner-slider{gap:1rem}}@media (min-width:64rem){:host .slider .inner-slider{flex-wrap:wrap}}:host .slider .inner-slider>::slotted(*){flex-shrink:0;position:relative;width:100%;z-index:10}@media (min-width:40rem){:host .slider .inner-slider>::slotted(*){width:45%}}@media (min-width:64rem){:host .slider .inner-slider>::slotted(*){flex:1 1 0%;width:100%}}:host .indicator{align-items:center;display:flex;gap:.5rem;justify-content:center}@media (min-width:64rem){:host .indicator{display:none}}@media (min-width:40rem){.tablet\\:w-\\[45\\%\\]{width:45%!important}.tablet\\:gap-4{gap:1rem!important}}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}}";
 
 const ContentSlider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -20,20 +20,29 @@ const ContentSlider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      * Wether to disable clicking the indicator scrolls content
      */
     this.disableIndicatorClick = false;
+    this._outerHeight = 0;
+    this._totalWidth = 0;
     this._items = [];
-    // mouse movement stuff
-    this._pos = { top: 0, left: 0, x: 0, y: 0 };
     this._dragging = false;
   }
   componentWillRender() {
     const items = this._el.querySelectorAll(':scope > *');
     this._items = Array.from(items);
   }
+  componentDidRender() {
+    const outerHeight = this._items.at(0).getBoundingClientRect().height;
+    if (outerHeight != this._outerHeight) {
+      this._outerHeight = outerHeight;
+    }
+  }
   componentDidLoad() {
+    this._calculateWidth();
     this._calculateIndicator();
   }
   render() {
-    return (h(Host, { class: "p-content-slider" }, h("div", { class: `content ${!this.disableDrag && 'draggable'} ${this._dragging && 'dragging'}`, ref: (el) => (this._contentRef = el), onScroll: () => this._handleScroll(), onMouseDown: (e) => this._mouseDownHandler(e) }, h("slot", null)), h("div", { class: `indicator ${this.hideMobileIndicator && 'hidden'}` }, this._items.map((_, i) => (h("p-slider-indicator", { class: !this.disableIndicatorClick && 'cursor-pointer', onClick: () => this._scrollTo(i), active: i === this._visibleIndex }))))));
+    return (h(Host, { class: "p-content-slider" }, h("div", { class: `slider ${!this.disableDrag && 'draggable'} ${this._dragging && 'dragging'}`, style: {
+        height: `${this._outerHeight}px`,
+      }, ref: (el) => (this._sliderRef = el), onScroll: () => this._handleScroll(), onMouseDown: (e) => this._mouseDownHandler(e), onMouseMove: (e) => this._mouseMoveHandler(e) }, h("div", { class: "inner-slider", ref: (ref) => (this._innerSliderRef = ref) }, h("slot", null))), h("div", { class: `indicator ${this.hideMobileIndicator && 'hidden'}` }, this._items.map((_, i) => (h("p-slider-indicator", { class: !this.disableIndicatorClick && 'cursor-pointer', onClick: () => this._scrollTo(i), active: i === this._visibleIndex }))))));
   }
   _handleScroll() {
     if (this._scrollHandlerTimeout) {
@@ -45,30 +54,37 @@ const ContentSlider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     if (this.disableDrag || this._dragging) {
       return;
     }
-    this._pos = {
-      // The current scroll
-      left: this._contentRef.scrollLeft,
-      top: this._contentRef.scrollTop,
-      // Get the current mouse position
-      x: e.clientX,
-      y: e.clientY,
-    };
+    this._startX = e.offsetX - this._innerSliderRef.offsetLeft;
     this._dragging = true;
   }
-  mouseMoveHandler(e) {
+  _mouseMoveHandler(e) {
     if (!e || !this._dragging || this.disableDrag) {
       return;
     }
-    // How far the mouse has been moved
-    const dx = e.clientX - this._pos.x;
-    const dy = e.clientY - this._pos.y;
-    // Scroll the element
-    this._contentRef.scrollTop = this._pos.top - dy;
-    this._contentRef.scrollLeft = this._pos.left - dx;
+    e.preventDefault();
+    const x = e.offsetX;
+    this._innerSliderRef.style.left = `${x - this._startX}px`;
+    this._checkBoundary();
+    this._calculateIndicator();
+  }
+  _checkBoundary() {
+    let outer = this._sliderRef.getBoundingClientRect();
+    if (parseInt(this._innerSliderRef.style.left) > 0) {
+      this._innerSliderRef.style.left = '0px';
+    }
+    const maxLeft = (this._totalWidth - outer.width) * -1;
+    if (parseInt(this._innerSliderRef.style.left) < maxLeft) {
+      this._innerSliderRef.style.left = `${maxLeft}px`;
+    }
   }
   mouseUpHandler() {
     this._dragging = false;
   }
+  resizeHandler() {
+    this._innerSliderRef.style.left = '0px';
+    this._calculateWidth();
+    this._calculateIndicator();
+  }
   _calculateIndicator() {
     for (let i = 0; i < this._items.length; i++) {
       const item = this._items[i];
@@ -82,28 +98,42 @@ const ContentSlider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   _isVisible(el) {
-    if (!this._el || !this._contentRef || !el) {
+    if (!this._el || !el) {
       return false;
     }
     const elRect = el.getBoundingClientRect();
-    const containerRect = this._el.getBoundingClientRect();
-    return (elRect.left > containerRect.left &&
-      elRect.right < containerRect.right);
+    const sliderRect = this._sliderRef.getBoundingClientRect();
+    return (elRect.left >= sliderRect.left && elRect.right <= sliderRect.right);
   }
   _scrollTo(i) {
     if (this.disableIndicatorClick) {
       return;
     }
     const el = this._items[i];
-    const parent = el.offsetParent;
-    const parentStyle = getComputedStyle(parent);
-    const gap = parseInt(parentStyle.gap.replace('px', ''));
-    const padding = parseInt(parentStyle['paddingLeft'].replace('px', '')) +
-      parseInt(parentStyle['paddingRight'].replace('px', ''));
-    this._contentRef.scrollTo({
-      left: el.offsetLeft - gap - padding - el.clientWidth / 2,
-      behavior: 'smooth',
-    });
+    if (i === 0) {
+      this._innerSliderRef.style.left = '0px';
+      this._calculateIndicator();
+      return;
+    }
+    const sliderRect = this._sliderRef.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    const centerOffset = el.offsetLeft + elRect.width / 2 - sliderRect.width / 2;
+    this._innerSliderRef.style.left = `-${centerOffset}px`;
+    this._checkBoundary();
+    this._calculateIndicator();
+  }
+  _calculateWidth() {
+    let totalWidth = 0;
+    for (let item of this._items) {
+      const rect = item.getBoundingClientRect();
+      totalWidth += rect.width;
+    }
+    const sliderStyle = getComputedStyle(this._sliderRef);
+    const padding = parseInt(sliderStyle.padding) * 2;
+    const innerSliderStyle = getComputedStyle(this._innerSliderRef);
+    const gap = parseInt(innerSliderStyle.gap) * (this._items.length - 1);
+    totalWidth += padding + gap;
+    this._totalWidth = totalWidth;
   }
   get _el() { return this; }
   static get style() { return contentSliderComponentCss; }
@@ -112,8 +142,10 @@ const ContentSlider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "disableDrag": [4, "disable-drag"],
     "disableIndicatorClick": [4, "disable-indicator-click"],
     "_visibleIndex": [32],
+    "_outerHeight": [32],
+    "_totalWidth": [32],
     "_dragging": [32]
-  }, [[9, "mousemove", "mouseMoveHandler"], [9, "mouseup", "mouseUpHandler"]]]);
+  }, [[9, "mouseup", "mouseUpHandler"], [9, "resize", "resizeHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/p-profile.js

@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './dropdown.component.js';
 import { d as defineCustomElement$3 } from './dropdown-menu-container.component.js';
 import { d as defineCustomElement$2 } from './icon.component.js';
 
-const profileComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.ml-auto{margin-left:auto!important}.flex{display:flex!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-3{gap:.75rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.rounded{border-radius:.25rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-mystic-dark{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}*{box-sizing:border-box}:host{display:flex}:host .content{align-items:center;display:flex;gap:.75rem;height:3rem;width:100%}:host .content .name{display:flex;flex-direction:column;justify-content:center;overflow:hidden}:host .content .name>:first-child{--tw-text-opacity:1;color:rgb(39 40 56/var(--tw-text-opacity));font-size:.875rem;font-weight:600;line-height:1.25rem}:host .content .name>:nth-child(2){--tw-text-opacity:1;color:rgb(152 154 183/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem}:host .content .name ::slotted(*){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-dropdown){cursor:pointer}:host(.has-dropdown) .content{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-radius:.25rem;border-style:solid!important;border-width:1px!important;padding-left:.5rem;padding-right:.5rem}:host(.active) .content,:host(.has-dropdown:hover) .content{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13);--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}:host(.active) .content p-icon{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}";
+const profileComponentCss = ".static{position:static!important}.absolute{position:absolute!important}.ml-auto{margin-left:auto!important}.flex{display:flex!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-3{gap:.75rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.rounded{border-radius:.25rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-mystic-dark{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}*{box-sizing:border-box}:host{display:flex}:host .content{align-items:center;display:flex;gap:.75rem;height:3rem;width:100%}:host .content .name{display:flex;flex-direction:column;justify-content:center;overflow:hidden}:host .content .name>:first-child{--tw-text-opacity:1;color:rgb(39 40 56/var(--tw-text-opacity));font-size:.875rem;font-weight:600;line-height:1.25rem}:host .content .name>:nth-child(2){--tw-text-opacity:1;color:rgb(152 154 183/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem}:host .content .name ::slotted(*){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-dropdown){cursor:pointer}:host(.has-dropdown) .content{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-radius:.25rem;border-style:solid!important;border-width:1px!important;padding-left:.5rem;padding-right:.5rem}:host(.active) .content,:host(.has-dropdown:hover) .content{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13);--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}:host(.active) .content p-icon{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}";
 
 const Profile = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/slider-indicator.component.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const sliderIndicatorComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.block{display:block!important}.hidden{display:none!important}.h-2{height:.5rem!important}.w-2{width:.5rem!important}.cursor-pointer{cursor:pointer!important}.bg-mystic-dark{--tw-bg-opacity:1!important;background-color:rgb(218 230 240/var(--tw-bg-opacity))!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(218 230 240/var(--tw-bg-opacity));border-radius:100%;display:block;height:.5rem;width:.5rem}:host(.active){--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity))}";
+const sliderIndicatorComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.block{display:block!important}.hidden{display:none!important}.h-2{height:.5rem!important}.w-2{width:.5rem!important}.cursor-pointer{cursor:pointer!important}.resize{resize:both!important}.bg-mystic-dark{--tw-bg-opacity:1!important;background-color:rgb(218 230 240/var(--tw-bg-opacity))!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(218 230 240/var(--tw-bg-opacity));border-radius:100%;display:block;height:.5rem;width:.5rem}:host(.active){--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity))}";
 
 const SliderIndicator = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/esm/{index-877dd68e.js → index-ba915982.js}

@@ -20,10 +20,10 @@ const plt = {
     ce: (eventName, opts) => new CustomEvent(eventName, opts),
 };
 const promiseResolve = (v) => Promise.resolve(v);
-const supportsConstructibleStylesheets = /*@__PURE__*/ (() => {
+const supportsConstructableStylesheets = /*@__PURE__*/ (() => {
         try {
             new CSSStyleSheet();
-            return typeof new CSSStyleSheet().replace === 'function';
+            return typeof new CSSStyleSheet().replaceSync === 'function';
         }
         catch (e) { }
         return false;
@@ -83,9 +83,14 @@ const uniqueTime = (key, measureText) => {
 const rootAppliedStyles = new WeakMap();
 const registerStyle = (scopeId, cssText, allowCS) => {
     let style = styles.get(scopeId);
-    if (supportsConstructibleStylesheets && allowCS) {
+    if (supportsConstructableStylesheets && allowCS) {
         style = (style || new CSSStyleSheet());
-        style.replace(cssText);
+        if (typeof style === 'string') {
+            style = cssText;
+        }
+        else {
+            style.replaceSync(cssText);
+        }
     }
     else {
         style = cssText;
@@ -296,6 +301,31 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
             classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
+        else if (memberName === 'style') {
+            // update style attribute, css properties and values
+            {
+                for (const prop in oldValue) {
+                    if (!newValue || newValue[prop] == null) {
+                        if (prop.includes('-')) {
+                            elm.style.removeProperty(prop);
+                        }
+                        else {
+                            elm.style[prop] = '';
+                        }
+                    }
+                }
+            }
+            for (const prop in newValue) {
+                if (!oldValue || newValue[prop] !== oldValue[prop]) {
+                    if (prop.includes('-')) {
+                        elm.style.setProperty(prop, newValue[prop]);
+                    }
+                    else {
+                        elm.style[prop] = newValue[prop];
+                    }
+                }
+            }
+        }
         else if (memberName === 'ref') {
             // minifier will clean this up
             if (newValue) {
@@ -1056,6 +1086,9 @@ const postUpdateComponent = (hostRef) => {
     const endPostUpdate = createTime('postUpdate', tagName);
     const instance = hostRef.$lazyInstance$ ;
     const ancestorComponent = hostRef.$ancestorComponent$;
+    {
+        safeCall(instance, 'componentDidRender');
+    }
     if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
         hostRef.$flags$ |= 64 /* hasLoadedComponent */;
         {