@swisspost/design-system-components 1.7.1 → 2.0.0

package/dist/post-components/p-169b8ef7.entry.js

@@ -1,2 +0,0 @@
-export{P as post_tabs}from"./p-aca6e9c1.js";import"./p-81591ad0.js";import"./p-bd1d0117.js";import"./p-2737eaf5.js";
-//# sourceMappingURL=p-169b8ef7.entry.js.map

package/dist/post-components/p-4b94c2a1.entry.js

@@ -1,2 +0,0 @@
-export{P as post_tab_panel}from"./p-a5a23448.js";import"./p-81591ad0.js";import"./p-bd1d0117.js";
-//# sourceMappingURL=p-4b94c2a1.entry.js.map

package/dist/post-components/p-4cbb5212.entry.js

@@ -1,2 +0,0 @@
-export{P as post_collapsible}from"./p-6cdc82c6.js";import"./p-81591ad0.js";import"./p-bd1d0117.js";import"./p-96f4ebc4.js";import"./p-440193f4.js";
-//# sourceMappingURL=p-4cbb5212.entry.js.map

package/dist/post-components/p-51ae6f46.entry.js

@@ -1,2 +0,0 @@
-export{P as post_popovercontainer}from"./p-7d08e4f1.js";import"./p-81591ad0.js";import"./p-bd1d0117.js";
-//# sourceMappingURL=p-51ae6f46.entry.js.map

package/dist/post-components/p-668bf58c.entry.js

@@ -1,2 +0,0 @@
-export{P as post_popover}from"./p-3ef3a1d2.js";import"./p-81591ad0.js";import"./p-bd1d0117.js";
-//# sourceMappingURL=p-668bf58c.entry.js.map

package/dist/post-components/p-67d0a4fa.entry.js

@@ -1,2 +0,0 @@
-export{P as post_icon}from"./p-d3ed113e.js";import"./p-81591ad0.js";import"./p-96f4ebc4.js";import"./p-440193f4.js";import"./p-bd1d0117.js";import"./p-b095519d.js";
-//# sourceMappingURL=p-67d0a4fa.entry.js.map

package/dist/post-components/p-6b3a5063.entry.js

@@ -1,2 +0,0 @@
-export{P as post_tooltip}from"./p-bc27f061.js";import"./p-81591ad0.js";import"./p-bd1d0117.js";
-//# sourceMappingURL=p-6b3a5063.entry.js.map

package/dist/post-components/p-6cdc82c6.js

@@ -1,2 +0,0 @@
-import{r as o,c as t,h as r,H as s,g as e}from"./p-81591ad0.js";import{v as i}from"./p-bd1d0117.js";import{d as a,b as n}from"./p-96f4ebc4.js";function c(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}const l=350;const d="ease";const p={height:"0",overflow:"hidden"};const g=o=>{const{height:t}=window.getComputedStyle(o);const r={height:t};return o.animate([r,p],{duration:l,easing:d,fill:"forwards"})};const b=o=>{const t={height:`${o.scrollHeight}px`};return o.animate([p,t],{duration:l,easing:d,fill:"forwards"})};const h=[1,2,3,4,5,6];const u=".accordion-item,.bg-light .accordion-item,.bg-gray .accordion-item{--post-bg-opacity:1;background-color:rgba(var(--post-bg-rgb), var(--post-bg-opacity)) !important;color:var(--post-contrast-color) !important}.accordion-item,.bg-light .accordion-item,.bg-gray .accordion-item{--post-contrast-color:#000;--post-contrast-color-inverted:#fff;--post-gray-10:hsl(0, 0%, 90%);--post-gray-20:hsl(0, 0%, 80%);--post-gray-40:hsl(0, 0%, 60%);--post-gray-60:hsl(0, 0%, 40%);--post-gray-80:hsl(0, 0%, 20%);--post-yellow:#fc0;--post-light:#faf9f8;--post-gray:#f4f3f1;--post-dark:hsl(0, 0%, 20%);--post-primary:hsl(0, 0%, 20%);--post-white:#fff;--post-black:#000;--post-info:#cce4ee;--post-success:#2c911c;--post-warning:#f49e00;--post-danger:#a51728;--post-nightblue:#004976;--post-nightblue-bright:#0076a8;--post-petrol:#006d68;--post-petrol-bright:#00968f;--post-coral:#9e2a2f;--post-coral-bright:#e03c31;--post-olive:#716135;--post-olive-bright:#aa9d2e;--post-purple:#80276c;--post-purple-bright:#c5299b;--post-aubergine:#523178;--post-aubergine-bright:#7566a0;--post-success-green:#2c871d;--post-error-red:#a51728;--post-warning-orange:#f49e00;--post-success-background:#c0debb;--post-error-background:#ffdade;--post-warning-background:#fce2b2;--post-contrast-color-rgb:0, 0, 0;--post-contrast-color-inverted-rgb:255, 255, 255;--post-gray-10-rgb:230, 230, 230;--post-gray-20-rgb:204, 204, 204;--post-gray-40-rgb:153, 153, 153;--post-gray-60-rgb:102, 102, 102;--post-gray-80-rgb:51, 51, 51;--post-yellow-rgb:255, 204, 0;--post-light-rgb:250, 249, 248;--post-gray-rgb:244, 243, 241;--post-dark-rgb:51, 51, 51;--post-primary-rgb:51, 51, 51;--post-white-rgb:255, 255, 255;--post-black-rgb:0, 0, 0;--post-info-rgb:204, 228, 238;--post-success-rgb:44, 145, 28;--post-warning-rgb:244, 158, 0;--post-danger-rgb:165, 23, 40;--post-nightblue-rgb:0, 73, 118;--post-nightblue-bright-rgb:0, 118, 168;--post-petrol-rgb:0, 109, 104;--post-petrol-bright-rgb:0, 150, 143;--post-coral-rgb:158, 42, 47;--post-coral-bright-rgb:224, 60, 49;--post-olive-rgb:113, 97, 53;--post-olive-bright-rgb:170, 157, 46;--post-purple-rgb:128, 39, 108;--post-purple-bright-rgb:197, 41, 155;--post-aubergine-rgb:82, 49, 120;--post-aubergine-bright-rgb:117, 102, 160;--post-success-green-rgb:44, 135, 29;--post-error-red-rgb:165, 23, 40;--post-warning-orange-rgb:244, 158, 0;--post-success-background-rgb:192, 222, 187;--post-error-background-rgb:255, 218, 222;--post-warning-background-rgb:252, 226, 178}.accordion-item{border-block:2px solid #666;--post-bg-rgb:244, 243, 241}.accordion-item+.accordion-item{border-block-start:0}.bg-light .accordion-item{--post-bg-rgb:255, 255, 255}.bg-gray .accordion-item{--post-bg-rgb:255, 255, 255}.accordion-header{color:#333;font-size:1rem;font-weight:700;line-height:1.5;margin:0}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;-webkit-appearance:button;appearance:button;outline:none;width:100%;position:relative;padding-block:1rem;padding-inline-start:1rem;padding-inline-end:3rem;text-align:start;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms}.accordion-button:focus-visible{outline:2px solid #1976c8}.accordion-button:hover{color:#000;background-color:#e6e6e6}.accordion-button:disabled{opacity:.4;pointer-events:none}.accordion-button::after{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6z'/%3E%3C/g%3E%3C/svg%3E\");background-color:currentColor;content:\"\";display:block;height:1.5rem;width:1.5rem;position:absolute;inset-inline-end:1rem;inset-block-start:50%;transform:translateY(-50%);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.accordion-button.collapsed::after{transform:translateY(-50%) rotate(-180deg)}.accordion-button>.text-truncate{display:block}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover:not(:disabled),.accordion-button:focus-visible:not(:disabled){outline:2px solid Highlight}.accordion-button:disabled{opacity:1 !important}}.accordion-body{padding:.5rem 1rem 1rem;font-weight:300}.accordion-button>*,.accordion-body>:first-child{margin-block-start:0 !important}.accordion-button>*,.accordion-body>:last-child{margin-block-end:0 !important}:host{display:block}.accordion-button{cursor:pointer}.accordion-button>::slotted(.text-truncate){display:block}post-collapsible+post-collapsible::part(accordion-item){border-block-start:0 !important}";const m=class{constructor(r){o(this,r);this.collapseChange=t(this,"collapseChange",7);this.isLoaded=false;this.id=undefined;this.isOpen=true;this.hasHeader=undefined;this.headingTag=undefined;this.collapsed=false;this.headingLevel=2}validateCollapsed(o=this.collapsed){a(o,"boolean","The `collapsed` property of the `post-collapsible` must be a boolean.")}validateHeadingLevel(o=this.headingLevel){n(o,h,"The `headingLevel` property of the `post-collapsible` must be a number between 1 and 6.")}connectedCallback(){this.validateCollapsed();this.validateHeadingLevel()}componentWillRender(){var o;this.id=this.host.id||`c${crypto.randomUUID()}`;this.hasHeader=this.host.querySelectorAll('[slot="header"]').length>0;this.headingTag=`h${(o=this.headingLevel)!==null&&o!==void 0?o:2}`}componentDidLoad(){if(this.collapsed)void this.toggle(false);this.isLoaded=true}async toggle(o=!this.isOpen){if(o===this.isOpen)return o;this.isOpen=!this.isOpen;if(this.isLoaded)this.collapseChange.emit();const t=o?b(this.collapsible):g(this.collapsible);if(!this.isLoaded||c())t.finish();await t.finished;t.commitStyles();return this.isOpen}render(){const o=r("div",{"aria-labelledby":this.hasHeader?`${this.id}--header`:undefined,class:`collapse${this.hasHeader?" accordion-collapse":""}`,id:`${this.id}--collapse`,ref:o=>this.collapsible=o},this.hasHeader?r("div",{class:"accordion-body"},r("slot",null)):r("slot",null));return r(s,{id:this.id,"data-version":i},this.hasHeader?r("div",{part:"accordion-item",class:"accordion-item"},r(this.headingTag,{class:"accordion-header",id:`${this.id}--header`},r("button",{"aria-controls":`${this.id}--collapse`,"aria-expanded":`${this.isOpen}`,class:`accordion-button${this.isOpen?"":" collapsed"}`,onClick:()=>this.toggle(),type:"button"},r("slot",{name:"header"}))),o):o)}get host(){return e(this)}static get watchers(){return{collapsed:["validateCollapsed"],headingLevel:["validateHeadingLevel"]}}};m.style=u;export{m as P};
-//# sourceMappingURL=p-6cdc82c6.js.map

package/dist/post-components/p-6cdc82c6.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["isMotionReduced","window","matchMedia","matches","collapseDuration","collapseEasing","collapsedKeyframe","height","overflow","collapse","el","getComputedStyle","expandedKeyframe","animate","duration","easing","fill","expand","scrollHeight","HEADING_LEVELS","postCollapsibleCss","PostCollapsible","this","isLoaded","validateCollapsed","newValue","collapsed","checkEmptyOrType","validateHeadingLevel","headingLevel","checkEmptyOrOneOf","connectedCallback","componentWillRender","id","host","crypto","randomUUID","hasHeader","querySelectorAll","length","headingTag","_a","componentDidLoad","toggle","open","isOpen","collapseChange","emit","animation","collapsible","finish","finished","commitStyles","render","h","undefined","class","ref","Host","version","part","onClick","type","name"],"sources":["src/utils/is-motion-reduced.ts","src/animations/collapse.ts","src/components/post-collapsible/heading-levels.ts","src/components/post-collapsible/post-collapsible.scss?tag=post-collapsible&encapsulation=shadow","src/components/post-collapsible/post-collapsible.tsx"],"sourcesContent":["export function isMotionReduced(): boolean {\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n","const collapseDuration = 350;\nconst collapseEasing = 'ease';\nconst collapsedKeyframe: Keyframe = { height: '0', overflow: 'hidden' };\n\nexport const collapse = (el: HTMLElement): Animation => {\n  const { height } = window.getComputedStyle(el);\n  const expandedKeyframe: Keyframe = { height };\n\n  return el.animate(\n    [expandedKeyframe, collapsedKeyframe],\n    { duration: collapseDuration, easing: collapseEasing, fill: 'forwards' },\n  );\n};\n\nexport const expand = (el: HTMLElement): Animation => {\n  const expandedKeyframe: Keyframe = { height: `${el.scrollHeight}px` };\n\n  return el.animate(\n    [collapsedKeyframe, expandedKeyframe],\n    { duration: collapseDuration, easing: collapseEasing, fill: 'forwards' },\n  );\n};\n","export const HEADING_LEVELS = [1, 2, 3, 4, 5, 6] as const;\n\nexport type HeadingLevel = typeof HEADING_LEVELS[number];\n","@use '@swisspost/design-system-styles/components/accordion';\n\n:host {\n  display: block;\n}\n\n.accordion-button {\n  cursor: pointer;\n\n  > ::slotted(.text-truncate) {\n    display: block;\n  }\n}\n\npost-collapsible + post-collapsible::part(accordion-item) {\n  border-block-start: 0!important;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { version } from '../../../package.json';\nimport { collapse, expand } from '../../animations/collapse';\nimport { checkEmptyOrOneOf, checkEmptyOrType, isMotionReduced } from '../../utils';\nimport { HEADING_LEVELS, HeadingLevel } from './heading-levels';\n\n@Component({\n  tag: 'post-collapsible',\n  styleUrl: 'post-collapsible.scss',\n  shadow: true,\n})\nexport class PostCollapsible {\n  private isLoaded = false;\n  private collapsible: HTMLElement;\n\n  @Element() host: HTMLPostCollapsibleElement;\n\n  @State() id: string;\n  @State() isOpen = true;\n  @State() hasHeader: boolean;\n  @State() headingTag: string;\n\n  /**\n   * If `true`, the element is initially collapsed otherwise it is displayed.\n   */\n  @Prop() readonly collapsed?: boolean = false;\n\n  @Watch('collapsed')\n  validateCollapsed(newValue = this.collapsed) {\n    checkEmptyOrType(\n      newValue,\n      'boolean',\n      'The `collapsed` property of the `post-collapsible` must be a boolean.',\n    );\n  }\n\n  /**\n   * Defines the hierarchical level of the collapsible header within the headings structure.\n   */\n  @Prop() readonly headingLevel?: HeadingLevel = 2;\n\n  @Watch('headingLevel')\n  validateHeadingLevel(newValue = this.headingLevel) {\n    checkEmptyOrOneOf(\n      newValue,\n      HEADING_LEVELS,\n      'The `headingLevel` property of the `post-collapsible` must be a number between 1 and 6.',\n    );\n  }\n\n  /**\n   * An event emitted when the collapse element is shown or hidden, before the transition. It has no payload.\n   */\n  @Event() collapseChange: EventEmitter<void>;\n\n  connectedCallback() {\n    this.validateCollapsed();\n    this.validateHeadingLevel();\n  }\n\n  componentWillRender() {\n    this.id = this.host.id || `c${crypto.randomUUID()}`;\n    this.hasHeader = this.host.querySelectorAll('[slot=\"header\"]').length > 0;\n    this.headingTag = `h${this.headingLevel ?? 2}`;\n  }\n\n  componentDidLoad() {\n    if (this.collapsed) void this.toggle(false);\n    this.isLoaded = true;\n  }\n\n  /**\n   * Triggers the collapse programmatically.\n   *\n   * If there is a collapsing transition running already, it will be reversed.\n   */\n  @Method()\n  async toggle(open = !this.isOpen): Promise<boolean> {\n    if (open === this.isOpen) return open;\n\n    this.isOpen = !this.isOpen;\n    if (this.isLoaded) this.collapseChange.emit();\n\n    const animation = open ? expand(this.collapsible) : collapse(this.collapsible);\n\n    if (!this.isLoaded || isMotionReduced()) animation.finish();\n\n    await animation.finished;\n\n    animation.commitStyles();\n\n    return this.isOpen;\n  }\n\n  render() {\n    const collapse = (\n      <div\n        aria-labelledby={this.hasHeader ? `${this.id}--header` : undefined}\n        class={`collapse${this.hasHeader ? ' accordion-collapse' : ''}`}\n        id={`${this.id}--collapse`}\n        ref={el => (this.collapsible = el)}\n      >\n        {this.hasHeader ? (\n          <div class=\"accordion-body\">\n            <slot />\n          </div>\n        ) : (\n          <slot />\n        )}\n      </div>\n    );\n\n    return (\n      <Host id={this.id} data-version={version}>\n        {this.hasHeader ? (\n          <div part=\"accordion-item\" class=\"accordion-item\">\n            <this.headingTag class=\"accordion-header\" id={`${this.id}--header`}>\n              <button\n                aria-controls={`${this.id}--collapse`}\n                aria-expanded={`${this.isOpen}`}\n                class={`accordion-button${this.isOpen ? '' : ' collapsed'}`}\n                onClick={() => this.toggle()}\n                type=\"button\"\n              >\n                <slot name=\"header\" />\n              </button>\n            </this.headingTag>\n\n            {collapse}\n          </div>\n        ) : (\n          collapse\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"wJAAgBA,IACd,OAAOC,OAAOC,WAAW,oCAAoCC,OAC/D,CCFA,MAAMC,EAAmB,IACzB,MAAMC,EAAiB,OACvB,MAAMC,EAA8B,CAAEC,OAAQ,IAAKC,SAAU,UAEtD,MAAMC,EAAYC,IACvB,MAAMH,OAAEA,GAAWN,OAAOU,iBAAiBD,GAC3C,MAAME,EAA6B,CAAEL,UAErC,OAAOG,EAAGG,QACR,CAACD,EAAkBN,GACnB,CAAEQ,SAAUV,EAAkBW,OAAQV,EAAgBW,KAAM,YAC7D,EAGI,MAAMC,EAAUP,IACrB,MAAME,EAA6B,CAAEL,OAAQ,GAAGG,EAAGQ,kBAEnD,OAAOR,EAAGG,QACR,CAACP,EAAmBM,GACpB,CAAEE,SAAUV,EAAkBW,OAAQV,EAAgBW,KAAM,YAC7D,ECpBI,MAAMG,EAAiB,CAAC,EAAG,EAAG,EAAG,EAAG,EAAG,GCA9C,MAAMC,EAAqB,8uJ,MCsBdC,EAAe,M,wEAClBC,KAAAC,SAAW,M,8BAMD,K,kEAOqB,M,kBAcQ,C,CAX/C,iBAAAC,CAAkBC,EAAWH,KAAKI,WAChCC,EACEF,EACA,UACA,wE,CAUJ,oBAAAG,CAAqBH,EAAWH,KAAKO,cACnCC,EACEL,EACAN,EACA,0F,CASJ,iBAAAY,GACET,KAAKE,oBACLF,KAAKM,sB,CAGP,mBAAAI,G,MACEV,KAAKW,GAAKX,KAAKY,KAAKD,IAAM,IAAIE,OAAOC,eACrCd,KAAKe,UAAYf,KAAKY,KAAKI,iBAAiB,mBAAmBC,OAAS,EACxEjB,KAAKkB,WAAa,KAAIC,EAAAnB,KAAKO,gBAAY,MAAAY,SAAA,EAAAA,EAAI,G,CAG7C,gBAAAC,GACE,GAAIpB,KAAKI,eAAgBJ,KAAKqB,OAAO,OACrCrB,KAAKC,SAAW,I,CASlB,YAAMoB,CAAOC,GAAQtB,KAAKuB,QACxB,GAAID,IAAStB,KAAKuB,OAAQ,OAAOD,EAEjCtB,KAAKuB,QAAUvB,KAAKuB,OACpB,GAAIvB,KAAKC,SAAUD,KAAKwB,eAAeC,OAEvC,MAAMC,EAAYJ,EAAO3B,EAAOK,KAAK2B,aAAexC,EAASa,KAAK2B,aAElE,IAAK3B,KAAKC,UAAYvB,IAAmBgD,EAAUE,eAE7CF,EAAUG,SAEhBH,EAAUI,eAEV,OAAO9B,KAAKuB,M,CAGd,MAAAQ,GACE,MAAM5C,EACJ6C,EAAA,yBACmBhC,KAAKe,UAAY,GAAGf,KAAKW,aAAesB,UACzDC,MAAO,WAAWlC,KAAKe,UAAY,sBAAwB,KAC3DJ,GAAI,GAAGX,KAAKW,eACZwB,IAAK/C,GAAOY,KAAK2B,YAAcvC,GAE9BY,KAAKe,UACJiB,EAAA,OAAKE,MAAM,kBACTF,EAAA,cAGFA,EAAA,cAKN,OACEA,EAACI,EAAI,CAACzB,GAAIX,KAAKW,GAAE,eAAgB0B,GAC9BrC,KAAKe,UACJiB,EAAA,OAAKM,KAAK,iBAAiBJ,MAAM,kBAC/BF,EAAChC,KAAKkB,WAAU,CAACgB,MAAM,mBAAmBvB,GAAI,GAAGX,KAAKW,cACpDqB,EAAA,0BACiB,GAAGhC,KAAKW,eAAc,gBACtB,GAAGX,KAAKuB,SACvBW,MAAO,mBAAmBlC,KAAKuB,OAAS,GAAK,eAC7CgB,QAAS,IAAMvC,KAAKqB,SACpBmB,KAAK,UAELR,EAAA,QAAMS,KAAK,aAIdtD,GACG,E"}