@swisspost/design-system-components 1.2.0 → 1.3.1
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/dist/cjs/post-collapsible.cjs.entry.js +1 -1
- package/dist/cjs/post-collapsible.cjs.entry.js.map +1 -1
- package/dist/collection/components/post-collapsible/post-collapsible.css +20 -19
- package/dist/components/post-collapsible.js +1 -1
- package/dist/components/post-collapsible.js.map +1 -1
- package/dist/docs.json +1 -1
- package/dist/esm/post-collapsible.entry.js +1 -1
- package/dist/esm/post-collapsible.entry.js.map +1 -1
- package/dist/post-components/p-d1bc7b0b.entry.js +2 -0
- package/dist/post-components/{p-6588c1b7.entry.js.map → p-d1bc7b0b.entry.js.map} +1 -1
- package/dist/post-components/post-components.esm.js +1 -1
- package/package.json +14 -6
- package/dist/post-components/p-6588c1b7.entry.js +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"post-collapsible.js","mappings":";;;AAAA;;;SAOgB,gBAAgB,CAAC,EAAe,EAAE,mBAAwB,EAAE;EAC1E,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC;IAAE,gBAAgB,GAAG,CAAC,gBAAgB,CAAC,CAAC;EAE5E,MAAM,YAAY,GAAG,gBAAgB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;EACrF,IAAI,YAAY,CAAC,MAAM;IAAE,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC;EAE3D,MAAM,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC;EAErC,IAAI,YAAY,CAAC,MAAM;IAAE,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,YAAY,CAAC,CAAC;EAE9D,OAAO,YAAY,CAAC;AACtB;;AClBA;;;SAIgB,kBAAkB;EAChC,OAAO,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC;AACvE;;ACNA;;;AAMO,eAAe,eAAe,CAAC,EAAe;EACnD,OAAO,IAAI,OAAO,CAAC,OAAO;IACxB,IAAI,kBAAkB,EAAE,EAAE;MACxB,OAAO,EAAE,CAAC;KACX;SAAM;MACL,EAAE,CAAC,eAAe,GAAG;QACnB,OAAO,EAAE,CAAC;QACV,EAAE,CAAC,eAAe,GAAG,IAAI,CAAC;OAC3B,CAAC;KACH;GACF,CAAC,CAAC;AACL;;ACjBA,MAAM,kBAAkB,GAAG
|
|
1
|
+
{"file":"post-collapsible.js","mappings":";;;AAAA;;;SAOgB,gBAAgB,CAAC,EAAe,EAAE,mBAAwB,EAAE;EAC1E,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC;IAAE,gBAAgB,GAAG,CAAC,gBAAgB,CAAC,CAAC;EAE5E,MAAM,YAAY,GAAG,gBAAgB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;EACrF,IAAI,YAAY,CAAC,MAAM;IAAE,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC;EAE3D,MAAM,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC;EAErC,IAAI,YAAY,CAAC,MAAM;IAAE,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,YAAY,CAAC,CAAC;EAE9D,OAAO,YAAY,CAAC;AACtB;;AClBA;;;SAIgB,kBAAkB;EAChC,OAAO,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC;AACvE;;ACNA;;;AAMO,eAAe,eAAe,CAAC,EAAe;EACnD,OAAO,IAAI,OAAO,CAAC,OAAO;IACxB,IAAI,kBAAkB,EAAE,EAAE;MACxB,OAAO,EAAE,CAAC;KACX;SAAM;MACL,EAAE,CAAC,eAAe,GAAG;QACnB,OAAO,EAAE,CAAC;QACV,EAAE,CAAC,eAAe,GAAG,IAAI,CAAC;OAC3B,CAAC;KACH;GACF,CAAC,CAAC;AACL;;ACjBA,MAAM,kBAAkB,GAAG,+l3LAA+l3L;;ACG1n3L,IAAI,MAAM,GAAG,CAAC,CAAC;MAOFA,iBAAe;;;;;IAoB1B,aAAQ,GAAG,KAAK,CAAC;qBAhBa,KAAK;wBAKH,CAAC;kBAEf,IAAI;;0BAEmB,IAAI;;;;;EAW7C,iBAAiB,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS;IACzC,YAAY,CAAC,QAAQ,EAAE,4DAA4D,CAAC,CAAC;IAErF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,CAAC,MAAM,GAAG,CAAC,QAAQ,CAAC;MACxB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAClD;SAAM;MACL,UAAU,CAAC;QACT,IAAI,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC;OACxB,CAAC,CAAC;KACJ;GACF;EAGD,oBAAoB,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY;IAC/C,UAAU,CACR,QAAQ,EACR,CAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAE,EACpB,wEAAwE,CACzE,CAAC;IAEF,IAAI,CAAC,UAAU,GAAG,IAAI,QAAQ,EAAE,CAAC;GAClC;EAED,iBAAiB;IACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAE5B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAC1E,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACnB,OAAO,CAAC,IAAI,CAAC,mMAAmM,CAAC,CAAC;KACnN;IAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,oBAAoB,MAAM,EAAE,EAAE,CAAC;IACpE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAClD;EAED,gBAAgB;IACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,aAAa,YAAY,CAAC,CAAC;GAClG;;;;EAMD,MAAM,MAAM,CAAC,OAAgB,CAAC,IAAI,CAAC,MAAM;IACvC,IAAI,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE;MACxB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;MAE3B,IAAI,CAAC,eAAe,EAAE,CAAC;MAEvB,MAAM,eAAe,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC;QAClD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;OAClD,CAAC,CAAC;MAEH,OAAO,IAAI,CAAC,MAAM,CAAC;KACpB;GACF;EAED,eAAe;IACb,MAAM,cAAc,GAAG,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;IAEzE,IAAI,CAAC,cAAc,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,cAAc,IAAI,CAAC;IAC9D,IAAI,CAAC,eAAe,GAAG,YAAY,CAAC;IAEpC,UAAU,CAAC;MACT,IAAI,CAAC,cAAc,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,cAAc,GAAG,CAAC,IAAI,CAAC;KAC/D,EAAE,EAAE,CAAC,CAAC;GACR;EAEO,kBAAkB;IACxB,OAAO,IAAI,CAAC,MAAM,GAAG,eAAe,GAAG,UAAU,CAAC;GACnD;EAED,MAAM;IACJ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACnB,QACE,WACE,EAAE,EAAE,GAAG,IAAI,CAAC,aAAa,YAAY,EACrC,KAAK,EAAE,IAAI,CAAC,eAAe,EAC3B,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,cAAc,EAAE,IAEtC,eAAO,CACH,EACN;KACH;IAED,QACE,WAAK,KAAK,EAAC,gBAAgB,IACzB,EAAC,IAAI,CAAC,UAAU,IAAC,KAAK,EAAC,kBAAkB,EAAC,EAAE,EAAE,GAAG,IAAI,CAAC,aAAa,UAAU,IAC3E,cACE,KAAK,EAAE,oBAAoB,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,WAAW,EAAE,EAC3D,IAAI,EAAC,QAAQ,mBACE,GAAG,IAAI,CAAC,MAAM,EAAE,mBAChB,GAAG,IAAI,CAAC,aAAa,YAAY,EAChD,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,IAE5B,YAAM,IAAI,EAAC,QAAQ,GAAE,CACd,CACO,EAClB,WACE,EAAE,EAAE,GAAG,IAAI,CAAC,aAAa,YAAY,EACrC,KAAK,EAAE,sBAAsB,IAAI,CAAC,eAAe,EAAE,EACnD,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,cAAc,EAAE,qBACrB,GAAG,IAAI,CAAC,aAAa,UAAU,IAEhD,WAAK,KAAK,EAAC,gBAAgB,IACzB,eAAO,CACH,CACF,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PostCollapsible"],"sources":["./src/utils/get-element-height.ts","./src/utils/should-reduce-motion.ts","./src/utils/on-transition-end.ts","./src/components/post-collapsible/post-collapsible.scss?tag=post-collapsible&encapsulation=shadow","./src/components/post-collapsible/post-collapsible.tsx"],"sourcesContent":["/*\n * Copyright 2022 by Swiss Post, Information Technology\n */\n\nexport function getElementHeight(el: HTMLElement): number;\nexport function getElementHeight(el: HTMLElement, classWhenShown: string): number;\nexport function getElementHeight(el: HTMLElement, classesWhenShown: string[]): number;\nexport function getElementHeight(el: HTMLElement, classesWhenShown: any = []): number {\n if (!Array.isArray(classesWhenShown)) classesWhenShown = [classesWhenShown];\n\n const classesToAdd = classesWhenShown.filter(klass => !el.classList.contains(klass));\n if (classesToAdd.length) el.classList.add(...classesToAdd);\n\n const scrollHeight = el.scrollHeight;\n\n if (classesToAdd.length) el.classList.remove(...classesToAdd);\n\n return scrollHeight;\n}\n","/*\n * Copyright 2022 by Swiss Post, Information Technology\n */\n\nexport function shouldReduceMotion(): boolean {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n","/*\n * Copyright 2022 by Swiss Post, Information Technology\n */\n\nimport { shouldReduceMotion } from './should-reduce-motion';\n\nexport async function onTransitionEnd(el: HTMLElement): Promise<void> {\n return new Promise(resolve => {\n if (shouldReduceMotion()) {\n resolve();\n } else {\n el.ontransitionend = () => {\n resolve();\n el.ontransitionend = null;\n };\n }\n });\n}\n","@use '@swisspost/design-system-styles/basics';\n@use '@swisspost/design-system-styles/components/accordion';\n@use '@swisspost/design-system-styles/components/transitions';\n\n:host {\n display: block;\n}\n","import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { checkBoolean, checkOneOf, getElementHeight, onTransitionEnd } from '../../utils';\n\nlet nextId = 0;\n\n@Component({\n tag: 'post-collapsible',\n styleUrl: 'post-collapsible.scss',\n shadow: true,\n})\nexport class PostCollapsible {\n /**\n * If `true`, the element is initially collapsed otherwise it is displayed.\n */\n @Prop() collapsed?: boolean = false;\n\n /**\n * Defines the hierarchical level of the collapsible header within the headings structure.\n */\n @Prop() headingLevel?: number = 2;\n\n @State() isOpen = true;\n @State() collapseClasses: string;\n @State() collapseHeight: string | null = null;\n @State() headingTag: string | undefined;\n @State() collapsibleId: string;\n @State() hasHeader: boolean;\n\n @Element() host: HTMLElement;\n\n isLoaded = false;\n collapsibleElement: HTMLElement;\n\n @Watch('collapsed')\n validateCollapsed(newValue = this.collapsed) {\n checkBoolean(newValue, 'The post-collapsible \"collapsed\" prop should be a boolean.');\n\n if (!this.isLoaded) {\n this.isOpen = !newValue;\n this.collapseClasses = this.getCollapseClasses();\n } else {\n setTimeout(() => {\n this.toggle(!newValue);\n });\n }\n }\n\n @Watch('headingLevel')\n validateHeadingLevel(newValue = this.headingLevel) {\n checkOneOf(\n newValue,\n [ 1, 2, 3, 4, 5, 6 ],\n 'The post-collapsible element requires a heading level between 1 and 6.',\n );\n\n this.headingTag = `h${newValue}`;\n }\n\n componentWillLoad() {\n this.validateCollapsed();\n this.validateHeadingLevel();\n\n this.hasHeader = this.host.querySelectorAll('[slot=\"header\"]').length > 0;\n if (!this.hasHeader) {\n console.warn('Be sure to bind the post-collapsible to its control using aria-controls and aria-expanded attributes. More information here: https://getbootstrap.com/docs/5.2/components/collapse/#accessibility');\n }\n\n this.collapsibleId = this.host.id || `post-collapsible-${nextId++}`;\n this.collapseClasses = this.getCollapseClasses();\n }\n\n componentDidLoad() {\n this.isLoaded = true;\n this.collapsibleElement = this.host.shadowRoot.querySelector(`#${this.collapsibleId}--collapse`);\n }\n\n /**\n * Triggers the collapse programmatically.\n */\n @Method()\n async toggle(open: boolean = !this.isOpen): Promise<boolean> {\n if (open !== this.isOpen) {\n this.isOpen = !this.isOpen;\n\n this.startTransition();\n\n await onTransitionEnd(this.collapsibleElement).then(() => {\n this.collapseHeight = null;\n this.collapseClasses = this.getCollapseClasses();\n });\n\n return this.isOpen;\n }\n }\n\n startTransition() {\n const expandedHeight = getElementHeight(this.collapsibleElement, 'show');\n\n this.collapseHeight = `${this.isOpen ? 0 : expandedHeight}px`;\n this.collapseClasses = 'collapsing';\n\n setTimeout(() => {\n this.collapseHeight = `${this.isOpen ? expandedHeight : 0}px`;\n }, 50);\n }\n\n private getCollapseClasses() {\n return this.isOpen ? 'collapse show' : 'collapse';\n }\n\n render() {\n if (!this.hasHeader) {\n return (\n <div\n id={`${this.collapsibleId}--collapse`}\n class={this.collapseClasses}\n style={{ height: this.collapseHeight }}\n >\n <slot/>\n </div>\n );\n }\n\n return (\n <div class=\"accordion-item\">\n <this.headingTag class=\"accordion-header\" id={`${this.collapsibleId}--header`}>\n <button\n class={`accordion-button ${this.isOpen ? '' : 'collapsed'}`}\n type=\"button\"\n aria-expanded={`${this.isOpen}`}\n aria-controls={`${this.collapsibleId}--collapse`}\n onClick={() => this.toggle()}\n >\n <slot name=\"header\"/>\n </button>\n </this.headingTag>\n <div\n id={`${this.collapsibleId}--collapse`}\n class={`accordion-collapse ${this.collapseClasses}`}\n style={{ height: this.collapseHeight }}\n aria-labelledby={`${this.collapsibleId}--header`}\n >\n <div class=\"accordion-body\">\n <slot/>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
package/dist/docs.json
CHANGED