@swisspost/design-system-components 1.3.7 → 1.3.9

package/dist/components/post-collapsible.js.map

@@ -1 +1 @@
-{"file":"post-collapsible.js","mappings":"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","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":["export 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: string | string[] = []): 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","export function shouldReduceMotion(): boolean {\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n","import { 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, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { checkOneOf, checkType, getElementHeight, onTransitionEnd } from '../../utils';\nimport { version } from '../../../package.json';\n\nlet nextId = 0;\n\n@Component({\n  tag: 'post-collapsible',\n  styleUrl: 'post-collapsible.scss',\n  shadow: true,\n})\nexport class PostCollapsible {\n  private collapsibleElement: HTMLElement;\n  private isLoaded = false;\n\n  @Element() host: HTMLPostCollapsibleElement;\n\n  @State() collapseClasses: string;\n  @State() collapseHeight: string | null = null;\n  @State() collapsibleId: string;\n  @State() hasHeader: boolean;\n  @State() headingTag: string | undefined;\n  @State() isOpen = true;\n  @State() onAccordionButtonClick = () => this.toggle();\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    checkType(newValue, 'boolean', '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  /**\n   * Defines the hierarchical level of the collapsible header within the headings structure.\n   */\n  @Prop() readonly headingLevel?: number = 2;\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(\n        '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\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(\n      `#${this.collapsibleId}--collapse`,\n    );\n  }\n\n  /**\n   * Triggers the collapse programmatically.\n   */\n  @Method()\n  async toggle(open = !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  private 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      <Host data-version={version}>\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.onAccordionButtonClick}\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      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"post-collapsible.js","mappings":"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","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":["export 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: string | string[] = []): 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","export function shouldReduceMotion(): boolean {\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n","import { 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, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { checkOneOf, checkType, getElementHeight, onTransitionEnd } from '../../utils';\nimport { version } from '../../../package.json';\n\nlet nextId = 0;\n\n@Component({\n  tag: 'post-collapsible',\n  styleUrl: 'post-collapsible.scss',\n  shadow: true,\n})\nexport class PostCollapsible {\n  private collapsibleElement: HTMLElement;\n  private isLoaded = false;\n\n  @Element() host: HTMLPostCollapsibleElement;\n\n  @State() collapseClasses: string;\n  @State() collapseHeight: string | null = null;\n  @State() collapsibleId: string;\n  @State() hasHeader: boolean;\n  @State() headingTag: string | undefined;\n  @State() isOpen = true;\n  @State() onAccordionButtonClick = () => this.toggle();\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    checkType(newValue, 'boolean', '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  /**\n   * Defines the hierarchical level of the collapsible header within the headings structure.\n   */\n  @Prop() readonly headingLevel?: number = 2;\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(\n        '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\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(\n      `#${this.collapsibleId}--collapse`,\n    );\n  }\n\n  /**\n   * Triggers the collapse programmatically.\n   */\n  @Method()\n  async toggle(open = !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  private 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      <Host data-version={version}>\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.onAccordionButtonClick}\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      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/docs.d.ts

@@ -3,48 +3,156 @@
  * This is an autogenerated file created by the Stencil compiler.
  * DO NOT MODIFY IT MANUALLY
  */
+/**
+ * A container for JSDoc metadata for a project
+ */
 export interface JsonDocs {
+    /**
+     * The metadata for the JSDocs for each component in a Stencil project
+     */
     components: JsonDocsComponent[];
+    /**
+     * The timestamp at which the metadata was generated, in the format YYYY-MM-DDThh:mm:ss
+     */
     timestamp: string;
     compiler: {
+        /**
+         * The name of the compiler that generated the metadata
+         */
         name: string;
+        /**
+         * The version of the Stencil compiler that generated the metadata
+         */
         version: string;
+        /**
+         * The version of TypeScript that was used to generate the metadata
+         */
         typescriptVersion: string;
     };
 }
+/**
+ * Container for JSDoc metadata for a single Stencil component
+ */
 export interface JsonDocsComponent {
+    /**
+     * The directory containing the Stencil component, minus the file name.
+     *
+     * @example /workspaces/stencil-project/src/components/my-component
+     */
     dirPath?: string;
+    /**
+     * The name of the file containing the Stencil component, with no path
+     *
+     * @example my-component.tsx
+     */
     fileName?: string;
+    /**
+     * The full path of the file containing the Stencil component
+     *
+     * @example /workspaces/stencil-project/src/components/my-component/my-component.tsx
+     */
     filePath?: string;
+    /**
+     * The path to the component's `readme.md` file, including the filename
+     *
+     * @example /workspaces/stencil-project/src/components/my-component/readme.md
+     */
     readmePath?: string;
+    /**
+     * The path to the component's `usage` directory
+     *
+     * @example /workspaces/stencil-project/src/components/my-component/usage/
+     */
     usagesDir?: string;
+    /**
+     * The encapsulation strategy for a component
+     */
     encapsulation: 'shadow' | 'scoped' | 'none';
+    /**
+     * The tag name for the component, for use in HTML
+     */
     tag: string;
+    /**
+     * The contents of a component's `readme.md` that are user generated.
+     *
+     * Auto-generated contents are not stored in this reference.
+     */
     readme: string;
+    /**
+     * The description of a Stencil component, found in the JSDoc that sits above the component's declaration
+     */
     docs: string;
+    /**
+     * JSDoc tags found in the JSDoc comment written atop a component's declaration
+     */
     docsTags: JsonDocsTag[];
     /**
      * The text from the class-level JSDoc for a Stencil component, if present.
      */
     overview?: string;
+    /**
+     * A mapping of usage example file names to their contents for the component.
+     */
     usage: JsonDocsUsage;
+    /**
+     * Array of metadata for a component's `@Prop`s
+     */
     props: JsonDocsProp[];
+    /**
+     * Array of metadata for a component's `@Method`s
+     */
     methods: JsonDocsMethod[];
+    /**
+     * Array of metadata for a component's `@Event`s
+     */
     events: JsonDocsEvent[];
+    /**
+     * Array of metadata for a component's `@Listen` handlers
+     */
     listeners: JsonDocsListener[];
+    /**
+     * Array of metadata for a component's CSS styling information
+     */
     styles: JsonDocsStyle[];
+    /**
+     * Array of component Slot information, generated from `@slot` tags
+     */
     slots: JsonDocsSlot[];
+    /**
+     * Array of component Parts information, generate from `@part` tags
+     */
     parts: JsonDocsPart[];
+    /**
+     * Array of metadata describing where the current component is used
+     */
     dependents: string[];
+    /**
+     * Array of metadata listing the components which are used in current component
+     */
     dependencies: string[];
+    /**
+     * Describes a tree of components coupling
+     */
     dependencyGraph: JsonDocsDependencyGraph;
+    /**
+     * A deprecation reason/description found following a `@deprecated` tag
+     */
     deprecation?: string;
 }
 export interface JsonDocsDependencyGraph {
     [tagName: string]: string[];
 }
+/**
+ * A descriptor for a single JSDoc tag found in a block comment
+ */
 export interface JsonDocsTag {
+    /**
+     * The tag name (immediately following the '@')
+     */
     name: string;
+    /**
+     * The description that immediately follows the tag name
+     */
     text?: string;
 }
 export interface JsonDocsValue {
@@ -74,21 +182,64 @@ export interface JsonDocsValue {
 export interface JsonDocsUsage {
     [key: string]: string;
 }
+/**
+ * An intermediate representation of a `@Prop` decorated member's JSDoc
+ */
 export interface JsonDocsProp {
+    /**
+     * the name of the prop
+     */
     name: string;
+    /**
+     * the type of the prop, in terms of the TypeScript type system (as opposed to JavaScript's or HTML's)
+     */
     type: string;
+    /**
+     * `true` if the prop was configured as "mutable" where it was declared, `false` otherwise
+     */
     mutable: boolean;
     /**
      * The name of the attribute that is exposed to configure a compiled web component
      */
     attr?: string;
+    /**
+     * `true` if the prop was configured to "reflect" back to HTML where it (the prop) was declared, `false` otherwise
+     */
     reflectToAttr: boolean;
+    /**
+     * the JSDoc description text associated with the prop
+     */
     docs: string;
+    /**
+     * JSDoc tags associated with the prop
+     */
     docsTags: JsonDocsTag[];
+    /**
+     * The default value of the prop
+     */
     default: string;
+    /**
+     * Deprecation text associated with the prop. This is the text that immediately follows a `@deprecated` tag
+     */
     deprecation?: string;
     values: JsonDocsValue[];
+    /**
+     * `true` if a component is declared with a '?', `false` otherwise
+     *
+     * @example
+     * ```tsx
+     * @Prop() componentProps?: any;
+     * ```
+     */
     optional: boolean;
+    /**
+     * `true` if a component is declared with a '!', `false` otherwise
+     *
+     * @example
+     * ```tsx
+     * @Prop() componentProps!: any;
+     * ```
+     */
     required: boolean;
 }
 export interface JsonDocsMethod {
@@ -130,12 +281,35 @@ export interface JsonDocsListener {
     capture: boolean;
     passive: boolean;
 }
+/**
+ * A descriptor for a slot
+ *
+ * Objects of this type are translated from the JSDoc tag, `@slot`
+ */
 export interface JsonDocsSlot {
+    /**
+     * The name of the slot. Defaults to an empty string for an unnamed slot.
+     */
     name: string;
+    /**
+     * A textual description of the slot.
+     */
     docs: string;
 }
+/**
+ * A descriptor of a CSS Shadow Part
+ *
+ * Objects of this type are translated from the JSDoc tag, `@part`, or the 'part'
+ * attribute on a component in TSX
+ */
 export interface JsonDocsPart {
+    /**
+     * The name of the Shadow part
+     */
     name: string;
+    /**
+     * A textual description of the Shadow part.
+     */
     docs: string;
 }
 export interface StyleDoc {

package/dist/docs.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2023-07-03T08:30:13",
+  "timestamp": "2023-07-31T08:42:18",
   "compiler": {
     "name": "@stencil/core",
-    "version": "3.4.0",
+    "version": "3.4.2",
     "typescriptVersion": "5.0.4"
   },
   "components": [

package/dist/esm/{index-cfac2b9c.js → index-60a84798.js}

@@ -1587,4 +1587,4 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 export { Host as H, bootstrapLazy as b, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=index-cfac2b9c.js.map
+//# sourceMappingURL=index-60a84798.js.map