q2-tecton-elements 1.51.0 → 1.52.0

package/dist/q2-tecton-elements/{p-95a7c042.entry.js.map → q2-relative-time.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["q2RelativeTimeCss","Q2RelativeTimeStyle0","Q2RelativeTime","this","syncTimer","trimSuffix","document","documentElement","lang","connectedCallback","syncUpdated","disconnectedCallback","window","clearInterval","componentWillLoad","updateMessage","displayedMessageValue","displayedMessage","validBaseDateProp","isValidBaseDate","validDateProp","isValidDate","isBaseDateProvided","dateObject","baseDateObject","locale","handleNumeric","messageFormat","isValidUnit","unit","sync","loc","message","intlFormatDistance","Date","localeMatcher","numeric","style","trimMessage","setInterval","baseDate","date","undefined","isValid","console","warn","includes","shouldShow","replace","render","h","Fragment","key","dateTime"],"sources":["src/components/q2-relative-time/q2-relative-time.scss?tag=q2-relative-time&encapsulation=shadow","src/components/q2-relative-time/q2-relative-time.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline;\n}\n","import { Component, Prop, State, Method, Watch, Element, h, ComponentInterface, Fragment } from '@stencil/core';\nimport { isValid as isValidDate, intlFormatDistance } from 'date-fns';\nimport { loc } from '../../utils';\n\n@Component({ tag: 'q2-relative-time', shadow: true, styleUrl: 'q2-relative-time.scss' })\nexport class Q2RelativeTime implements ComponentInterface {\n    // #region Own Properties\n\n    /**\n     * @private\n     * Used to manage the sync timer that updates the time since the component was connected to the DOM.\n     * Will be set to null if a valid `baseDate` is provided.\n     */\n    syncTimer = null;\n    /** @private Will be set to true if a valid `baseDate` is provided. */\n    trimSuffix: boolean = false;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    displayedMessage: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * If you want to display the length of time between two specific dates, you can provide a valid `date` and `baseDate`, and the component will display the length of time between the two dates.\n     *\n     * If `baseDate` is not provided, the date and time at render will be used instead and - if `sync` is true - updated every second to reflect the time between the `date` value and the time at render.\n     *\n     * @warning\n     * - Requires a valid `date` value.\n     * - If the provided `baseDate` is invalid, the component will display \"Invalid Date\" and a warning message will be printed in the console.\n     * - Providing a valid `baseDate` will disable `sync` and remove the \"in\"/\"ago\" suffixes in the time message.\n     * - Must be a valid ISO date string.\n     */\n    @Prop({ reflect: true })\n    baseDate: Date | string;\n\n    /**\n     * The date you want to calculate relative time from.\n     *\n     * @warning\n     * - Must be a valid ISO date string.\n     * - If the provided `date` is invalid, the component will display \"Invalid Date\" and a warning message will be printed in the console.\n     */\n    @Prop({ reflect: true })\n    date: Date | string;\n\n    /**\n     * The language used for the displayed message.\n     * @info\n     * It is recommended to use the BCP 47 Language Tags in the [\"language-extlang\" format](https://www.w3.org/International/articles/language-tags/).\n     */\n    @Prop({ reflect: true })\n    locale: string = document.documentElement.lang || 'en-US';\n\n    /** The length of the relative time message. */\n    @Prop({ reflect: true })\n    messageFormat: 'long' | 'short' | 'narrow' = 'short';\n\n    /**\n     * Determines if the displayed message will use numeric or relative values.\n     *@info\n     * Set this property to `always` to force the use of numeric values (e.g. \"1 day ago\") rather than relative ones (e.g. \"yesterday\").\n     */\n    @Prop({ reflect: true })\n    numeric: 'always' | 'auto' = 'auto';\n\n    /**\n     * Keep the displayed message updated as time passes in the webpage.\n     * @warning\n     * If a valid `baseDate` is provided, `sync` will be set to `false`.\n     */\n    @Prop({ reflect: true, mutable: true })\n    sync: boolean = true;\n\n    /** Enforces the use of the provided unit of measurement in the displayed message. */\n    @Prop({ reflect: true })\n    unit: 'second' | 'minute' | 'hour' | 'day' | 'month' | 'quarter' | 'year';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    connectedCallback(): void {\n        this.syncUpdated();\n    }\n\n    disconnectedCallback(): void {\n        window.clearInterval(this.syncTimer);\n        this.syncTimer = null;\n    }\n\n    componentWillLoad(): void | Promise<void> {\n        this.updateMessage();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /** Retrieves the value of the displayed messages. */\n    @Method()\n    async displayedMessageValue(): Promise<string> {\n        return this.displayedMessage;\n    }\n\n    /** Checks the provided baseDate prop is a valid date. */\n    @Method()\n    async validBaseDateProp(): Promise<boolean> {\n        return this.isValidBaseDate;\n    }\n\n    /** Checks the provided date prop is a valid date. */\n    @Method()\n    async validDateProp(): Promise<boolean> {\n        return this.isValidDate;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('messageFormat')\n    @Watch('locale')\n    @Watch('date')\n    @Watch('baseDate')\n    @Watch('numeric')\n    @Watch('unit')\n    updateMessage() {\n        const {\n            isValidDate,\n            isBaseDateProvided,\n            isValidBaseDate,\n            dateObject,\n            baseDateObject,\n            locale,\n            handleNumeric,\n            messageFormat,\n            isValidUnit,\n            unit,\n            trimSuffix,\n        } = this;\n\n        if (!isValidDate || (isBaseDateProvided && !isValidBaseDate)) {\n            this.sync = false;\n            this.displayedMessage = loc('tecton.element.relativeTime.invalidDate');\n            return;\n        }\n\n        const message = intlFormatDistance(new Date(dateObject), new Date(baseDateObject), {\n            locale,\n            localeMatcher: 'best fit',\n            numeric: handleNumeric,\n            style: messageFormat,\n            unit: isValidUnit ? unit : null,\n        });\n\n        if (trimSuffix) {\n            this.displayedMessage = this.trimMessage(message);\n        } else {\n            this.displayedMessage = message;\n        }\n    }\n\n    @Watch('sync')\n    syncUpdated() {\n        if (this.sync) {\n            this.syncTimer = window.setInterval(() => {\n                this.updateMessage();\n            }, 1000);\n        } else {\n            window.clearInterval(this.syncTimer);\n            this.syncTimer = null;\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get baseDateObject(): Date {\n        if (this.isBaseDateProvided && this.isValidBaseDate) {\n            this.trimSuffix = true;\n            this.sync = false;\n            return new Date(this.baseDate);\n        } else {\n            this.trimSuffix = false;\n            this.sync = true;\n            return new Date();\n        }\n    }\n\n    get dateObject(): Date {\n        return new Date(this.date);\n    }\n\n    get handleNumeric(): 'always' | 'auto' {\n        if (this.isValidBaseDate) return 'always';\n        return this.numeric;\n    }\n\n    get isBaseDateProvided(): boolean {\n        return this.baseDate !== undefined;\n    }\n\n    get isValidBaseDate(): boolean {\n        const date = new Date(this.baseDate);\n        const isValid = isValidDate(date);\n        if (!isValid && this.isBaseDateProvided) {\n            console.warn('Error: Invalid baseDate provided to q2-relative-time.');\n        }\n        return isValid;\n    }\n\n    get isValidDate(): boolean {\n        const date = new Date(this.date);\n        const isValid = isValidDate(date);\n        if (!isValid) console.warn('Error: Invalid date provided to q2-relative-time.');\n        return isValid;\n    }\n\n    get isValidUnit(): boolean {\n        if (['second', 'minute', 'hour', 'day', 'month', 'quarter', 'year'].includes(this.unit)) return true;\n        return false;\n    }\n\n    get shouldShow(): boolean {\n        return !!this.displayedMessage;\n    }\n\n    trimMessage(message: string): string {\n        return message.replace(/^in\\s?/, '').replace(/\\sago$/, '');\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { shouldShow, displayedMessage } = this;\n\n        return <Fragment>{shouldShow ? <time dateTime={displayedMessage}>{displayedMessage}</time> : null}</Fragment>;\n    }\n\n    // #endregion\n}\n"],"mappings":"iIAAA,MAAMA,EAAoB,+qBAC1B,MAAAC,EAAeD,E,MCIFE,EAAc,M,yBAQvBC,KAAAC,UAAY,KAEZD,KAAAE,WAAsB,M,wFA+CLC,SAASC,gBAAgBC,MAAQ,Q,mBAIL,Q,aAQhB,O,UAQb,K,oBAShB,iBAAAC,GACIN,KAAKO,a,CAGT,oBAAAC,GACIC,OAAOC,cAAcV,KAAKC,WAC1BD,KAAKC,UAAY,I,CAGrB,iBAAAU,GACIX,KAAKY,e,CAQT,2BAAMC,GACF,OAAOb,KAAKc,gB,CAKhB,uBAAMC,GACF,OAAOf,KAAKgB,e,CAKhB,mBAAMC,GACF,OAAOjB,KAAKkB,W,CAYhB,aAAAN,GACI,MAAMM,YACFA,EAAWC,mBACXA,EAAkBH,gBAClBA,EAAeI,WACfA,EAAUC,eACVA,EAAcC,OACdA,EAAMC,cACNA,EAAaC,cACbA,EAAaC,YACbA,EAAWC,KACXA,EAAIxB,WACJA,GACAF,KAEJ,IAAKkB,GAAgBC,IAAuBH,EAAkB,CAC1DhB,KAAK2B,KAAO,MACZ3B,KAAKc,iBAAmBc,EAAI,2CAC5B,M,CAGJ,MAAMC,EAAUC,qBAAmB,IAAIC,KAAKX,GAAa,IAAIW,KAAKV,GAAiB,CAC/EC,SACAU,cAAe,WACfC,QAASV,EACTW,MAAOV,EACPE,KAAMD,EAAcC,EAAO,OAG/B,GAAIxB,EAAY,CACZF,KAAKc,iBAAmBd,KAAKmC,YAAYN,E,KACtC,CACH7B,KAAKc,iBAAmBe,C,EAKhC,WAAAtB,GACI,GAAIP,KAAK2B,KAAM,CACX3B,KAAKC,UAAYQ,OAAO2B,aAAY,KAChCpC,KAAKY,eAAe,GACrB,I,KACA,CACHH,OAAOC,cAAcV,KAAKC,WAC1BD,KAAKC,UAAY,I,EAOzB,kBAAIoB,GACA,GAAIrB,KAAKmB,oBAAsBnB,KAAKgB,gBAAiB,CACjDhB,KAAKE,WAAa,KAClBF,KAAK2B,KAAO,MACZ,OAAO,IAAII,KAAK/B,KAAKqC,S,KAClB,CACHrC,KAAKE,WAAa,MAClBF,KAAK2B,KAAO,KACZ,OAAO,IAAII,I,EAInB,cAAIX,GACA,OAAO,IAAIW,KAAK/B,KAAKsC,K,CAGzB,iBAAIf,GACA,GAAIvB,KAAKgB,gBAAiB,MAAO,SACjC,OAAOhB,KAAKiC,O,CAGhB,sBAAId,GACA,OAAOnB,KAAKqC,WAAaE,S,CAG7B,mBAAIvB,GACA,MAAMsB,EAAO,IAAIP,KAAK/B,KAAKqC,UAC3B,MAAMG,EAAUtB,UAAYoB,GAC5B,IAAKE,GAAWxC,KAAKmB,mBAAoB,CACrCsB,QAAQC,KAAK,wD,CAEjB,OAAOF,C,CAGX,eAAItB,GACA,MAAMoB,EAAO,IAAIP,KAAK/B,KAAKsC,MAC3B,MAAME,EAAUtB,UAAYoB,GAC5B,IAAKE,EAASC,QAAQC,KAAK,qDAC3B,OAAOF,C,CAGX,eAAIf,GACA,GAAI,CAAC,SAAU,SAAU,OAAQ,MAAO,QAAS,UAAW,QAAQkB,SAAS3C,KAAK0B,MAAO,OAAO,KAChG,OAAO,K,CAGX,cAAIkB,GACA,QAAS5C,KAAKc,gB,CAGlB,WAAAqB,CAAYN,GACR,OAAOA,EAAQgB,QAAQ,SAAU,IAAIA,QAAQ,SAAU,G,CAM3D,MAAAC,GACI,MAAMF,WAAEA,EAAU9B,iBAAEA,GAAqBd,KAEzC,OAAO+C,EAACC,EAAQ,CAAAC,IAAA,4CAAEL,EAAaG,EAAA,QAAMG,SAAUpC,GAAmBA,GAA2B,K"}
+{"version":3,"names":["q2RelativeTimeCss","Q2RelativeTimeStyle0","Q2RelativeTime","this","syncTimer","trimSuffix","document","documentElement","lang","connectedCallback","syncUpdated","disconnectedCallback","window","clearInterval","componentWillLoad","updateMessage","displayedMessageValue","displayedMessage","validBaseDateProp","isValidBaseDate","validDateProp","isValidDate","isBaseDateProvided","dateObject","baseDateObject","locale","handleNumeric","messageFormat","isValidUnit","unit","sync","loc","message","intlFormatDistance","Date","localeMatcher","numeric","style","trimMessage","setInterval","baseDate","date","undefined","isValid","console","warn","includes","shouldShow","replace","render","h","Fragment","key","dateTime"],"sources":["src/components/q2-relative-time/q2-relative-time.scss?tag=q2-relative-time&encapsulation=shadow","src/components/q2-relative-time/q2-relative-time.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline;\n}\n","import { Component, Prop, State, Method, Watch, Element, h, ComponentInterface, Fragment } from '@stencil/core';\nimport { isValid as isValidDate, intlFormatDistance } from 'date-fns';\nimport { loc } from '../../utils';\n\n@Component({ tag: 'q2-relative-time', shadow: true, styleUrl: 'q2-relative-time.scss' })\nexport class Q2RelativeTime implements ComponentInterface {\n    // #region Own Properties\n\n    /**\n     * @private\n     * Used to manage the sync timer that updates the time since the component was connected to the DOM.\n     * Will be set to null if a valid `baseDate` is provided.\n     */\n    syncTimer = null;\n    /** @private Will be set to true if a valid `baseDate` is provided. */\n    trimSuffix: boolean = false;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    displayedMessage: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * If you want to display the length of time between two specific dates, you can provide a valid `date` and `baseDate`, and the component will display the length of time between the two dates.\n     *\n     * If `baseDate` is not provided, the date and time at render will be used instead and - if `sync` is true - updated every second to reflect the time between the `date` value and the time at render.\n     *\n     * @warning\n     * - Requires a valid `date` value.\n     * - If the provided `baseDate` is invalid, the component will display \"Invalid Date\" and a warning message will be printed in the console.\n     * - Providing a valid `baseDate` will disable `sync` and remove the \"in\"/\"ago\" suffixes in the time message.\n     * - Must be a valid ISO date string.\n     */\n    @Prop({ reflect: true })\n    baseDate: Date | string;\n\n    /**\n     * The date you want to calculate relative time from.\n     *\n     * @warning\n     * - Must be a valid ISO date string.\n     * - If the provided `date` is invalid, the component will display \"Invalid Date\" and a warning message will be printed in the console.\n     */\n    @Prop({ reflect: true })\n    date: Date | string;\n\n    /**\n     * The language used for the displayed message.\n     * @info\n     * It is recommended to use the BCP 47 Language Tags in the [\"language-extlang\" format](https://www.w3.org/International/articles/language-tags/).\n     */\n    @Prop({ reflect: true })\n    locale: string = document.documentElement.lang || 'en-US';\n\n    /** The length of the relative time message. */\n    @Prop({ reflect: true })\n    messageFormat: 'long' | 'short' | 'narrow' = 'short';\n\n    /**\n     * Determines if the displayed message will use numeric or relative values.\n     *@info\n     * Set this property to `always` to force the use of numeric values (e.g. \"1 day ago\") rather than relative ones (e.g. \"yesterday\").\n     */\n    @Prop({ reflect: true })\n    numeric: 'always' | 'auto' = 'auto';\n\n    /**\n     * Keep the displayed message updated as time passes in the webpage.\n     * @warning\n     * If a valid `baseDate` is provided, `sync` will be set to `false`.\n     */\n    @Prop({ reflect: true, mutable: true })\n    sync: boolean = true;\n\n    /** Enforces the use of the provided unit of measurement in the displayed message. */\n    @Prop({ reflect: true })\n    unit: 'second' | 'minute' | 'hour' | 'day' | 'month' | 'quarter' | 'year';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    connectedCallback(): void {\n        this.syncUpdated();\n    }\n\n    disconnectedCallback(): void {\n        window.clearInterval(this.syncTimer);\n        this.syncTimer = null;\n    }\n\n    componentWillLoad(): void | Promise<void> {\n        this.updateMessage();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /** Retrieves the value of the displayed messages. */\n    @Method()\n    async displayedMessageValue(): Promise<string> {\n        return this.displayedMessage;\n    }\n\n    /** Checks the provided baseDate prop is a valid date. */\n    @Method()\n    async validBaseDateProp(): Promise<boolean> {\n        return this.isValidBaseDate;\n    }\n\n    /** Checks the provided date prop is a valid date. */\n    @Method()\n    async validDateProp(): Promise<boolean> {\n        return this.isValidDate;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('messageFormat')\n    @Watch('locale')\n    @Watch('date')\n    @Watch('baseDate')\n    @Watch('numeric')\n    @Watch('unit')\n    updateMessage() {\n        const {\n            isValidDate,\n            isBaseDateProvided,\n            isValidBaseDate,\n            dateObject,\n            baseDateObject,\n            locale,\n            handleNumeric,\n            messageFormat,\n            isValidUnit,\n            unit,\n            trimSuffix,\n        } = this;\n\n        if (!isValidDate || (isBaseDateProvided && !isValidBaseDate)) {\n            this.sync = false;\n            this.displayedMessage = loc('tecton.element.relativeTime.invalidDate');\n            return;\n        }\n\n        const message = intlFormatDistance(new Date(dateObject), new Date(baseDateObject), {\n            locale,\n            localeMatcher: 'best fit',\n            numeric: handleNumeric,\n            style: messageFormat,\n            unit: isValidUnit ? unit : null,\n        });\n\n        if (trimSuffix) {\n            this.displayedMessage = this.trimMessage(message);\n        } else {\n            this.displayedMessage = message;\n        }\n    }\n\n    @Watch('sync')\n    syncUpdated() {\n        if (this.sync) {\n            this.syncTimer = window.setInterval(() => {\n                this.updateMessage();\n            }, 1000);\n        } else {\n            window.clearInterval(this.syncTimer);\n            this.syncTimer = null;\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get baseDateObject(): Date {\n        if (this.isBaseDateProvided && this.isValidBaseDate) {\n            this.trimSuffix = true;\n            this.sync = false;\n            return new Date(this.baseDate);\n        } else {\n            this.trimSuffix = false;\n            this.sync = true;\n            return new Date();\n        }\n    }\n\n    get dateObject(): Date {\n        return new Date(this.date);\n    }\n\n    get handleNumeric(): 'always' | 'auto' {\n        if (this.isValidBaseDate) return 'always';\n        return this.numeric;\n    }\n\n    get isBaseDateProvided(): boolean {\n        return this.baseDate !== undefined;\n    }\n\n    get isValidBaseDate(): boolean {\n        const date = new Date(this.baseDate);\n        const isValid = isValidDate(date);\n        if (!isValid && this.isBaseDateProvided) {\n            console.warn('Error: Invalid baseDate provided to q2-relative-time.');\n        }\n        return isValid;\n    }\n\n    get isValidDate(): boolean {\n        const date = new Date(this.date);\n        const isValid = isValidDate(date);\n        if (!isValid) console.warn('Error: Invalid date provided to q2-relative-time.');\n        return isValid;\n    }\n\n    get isValidUnit(): boolean {\n        if (['second', 'minute', 'hour', 'day', 'month', 'quarter', 'year'].includes(this.unit)) return true;\n        return false;\n    }\n\n    get shouldShow(): boolean {\n        return !!this.displayedMessage;\n    }\n\n    trimMessage(message: string): string {\n        return message.replace(/^in\\s?/, '').replace(/\\sago$/, '');\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { shouldShow, displayedMessage } = this;\n\n        return <Fragment>{shouldShow ? <time dateTime={displayedMessage}>{displayedMessage}</time> : null}</Fragment>;\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;;;AAAA,MAAMA,IAAoB;;AAC1B,MAAAC,IAAeD;;MCIFE,IAAc;;;;;;;;eAQvBC,KAAAC,YAAY;8EAEZD,KAAAE,aAAsB;;;;kBA+CLC,SAASC,gBAAgBC,QAAQ;yBAIL;mBAQhB;gBAQb;;;;;EAShB,iBAAAC;IACIN,KAAKO;;EAGT,oBAAAC;IACIC,OAAOC,cAAcV,KAAKC;IAC1BD,KAAKC,YAAY;;EAGrB,iBAAAU;IACIX,KAAKY;;;;;EAQT,2BAAMC;IACF,OAAOb,KAAKc;;6DAKhB,uBAAMC;IACF,OAAOf,KAAKgB;;yDAKhB,mBAAMC;IACF,OAAOjB,KAAKkB;;;;EAYhB,aAAAN;IACI,OAAMM,aACFA,GAAWC,oBACXA,GAAkBH,iBAClBA,GAAeI,YACfA,GAAUC,gBACVA,GAAcC,QACdA,GAAMC,eACNA,GAAaC,eACbA,GAAaC,aACbA,GAAWC,MACXA,GAAIxB,YACJA,KACAF;IAEJ,KAAKkB,KAAgBC,MAAuBH,GAAkB;MAC1DhB,KAAK2B,OAAO;MACZ3B,KAAKc,mBAAmBc,EAAI;MAC5B;;IAGJ,MAAMC,IAAUC,qBAAmB,IAAIC,KAAKX,IAAa,IAAIW,KAAKV,IAAiB;MAC/EC;MACAU,eAAe;MACfC,SAASV;MACTW,OAAOV;MACPE,MAAMD,IAAcC,IAAO;;IAG/B,IAAIxB,GAAY;MACZF,KAAKc,mBAAmBd,KAAKmC,YAAYN;WACtC;MACH7B,KAAKc,mBAAmBe;;;EAKhC,WAAAtB;IACI,IAAIP,KAAK2B,MAAM;MACX3B,KAAKC,YAAYQ,OAAO2B,aAAY;QAChCpC,KAAKY;AAAe,UACrB;WACA;MACHH,OAAOC,cAAcV,KAAKC;MAC1BD,KAAKC,YAAY;;;;;EAOzB,kBAAIoB;IACA,IAAIrB,KAAKmB,sBAAsBnB,KAAKgB,iBAAiB;MACjDhB,KAAKE,aAAa;MAClBF,KAAK2B,OAAO;MACZ,OAAO,IAAII,KAAK/B,KAAKqC;WAClB;MACHrC,KAAKE,aAAa;MAClBF,KAAK2B,OAAO;MACZ,OAAO,IAAII;;;EAInB,cAAIX;IACA,OAAO,IAAIW,KAAK/B,KAAKsC;;EAGzB,iBAAIf;IACA,IAAIvB,KAAKgB,iBAAiB,OAAO;IACjC,OAAOhB,KAAKiC;;EAGhB,sBAAId;IACA,OAAOnB,KAAKqC,aAAaE;;EAG7B,mBAAIvB;IACA,MAAMsB,IAAO,IAAIP,KAAK/B,KAAKqC;IAC3B,MAAMG,IAAUtB,UAAYoB;IAC5B,KAAKE,KAAWxC,KAAKmB,oBAAoB;MACrCsB,QAAQC,KAAK;;IAEjB,OAAOF;;EAGX,eAAItB;IACA,MAAMoB,IAAO,IAAIP,KAAK/B,KAAKsC;IAC3B,MAAME,IAAUtB,UAAYoB;IAC5B,KAAKE,GAASC,QAAQC,KAAK;IAC3B,OAAOF;;EAGX,eAAIf;IACA,IAAI,EAAC,UAAU,UAAU,QAAQ,OAAO,SAAS,WAAW,SAAQkB,SAAS3C,KAAK0B,OAAO,OAAO;IAChG,OAAO;;EAGX,cAAIkB;IACA,SAAS5C,KAAKc;;EAGlB,WAAAqB,CAAYN;IACR,OAAOA,EAAQgB,QAAQ,UAAU,IAAIA,QAAQ,UAAU;;;;EAM3D,MAAAC;IACI,OAAMF,YAAEA,GAAU9B,kBAAEA,KAAqBd;IAEzC,OAAO+C,EAACC,GAAQ;MAAAC,KAAA;OAAEL,IAAaG,EAAA;MAAMG,UAAUpC;OAAmBA,KAA2B"}

package/dist/q2-tecton-elements/q2-resize-observer.entry.js

@@ -0,0 +1,100 @@
+import { r as i, c as t, h as e, g as s } from "./index-7a5365e2.js";
+
+const n = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host(:not([hidden])){display:block;width:100%}";
+
+const o = n;
+
+const r = class {
+  constructor(e) {
+    i(this, e);
+    this.tctResize = t(this, "tctResize", 7);
+    this.observedElements = [];
+    // #endregion
+    // #region Local Methods
+        this.handleSlotChange = () => {
+      if (this.disabled) return;
+      this.startObserver();
+    };
+    this.disabled = undefined;
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  disconnectedCallback() {
+    this.stopObserver();
+    this.resizeObserver = null;
+  }
+  componentDidLoad() {
+    if ("ResizeObserver" in window) {
+      this.resizeObserver = new ResizeObserver((i => {
+        this.tctResize.emit({
+          entries: i
+        });
+        this.currentResizeObserverEntries = i;
+      }));
+    } else {
+      console.warn("ResizeObserver is not defined.");
+    }
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  // #endregion
+  // #region Public Methods API
+  /**
+     * Returns the latest entries reported by the component.
+     */
+  async getCurrentResizeEntries() {
+    return this.currentResizeObserverEntries || [];
+  }
+  // #endregion
+  // #region Watchers
+  disabledUpdated(i) {
+    if (i) {
+      this.stopObserver();
+    } else {
+      this.startObserver();
+    }
+  }
+  startObserver() {
+    var i, t, e;
+    const s = this.hostElement.shadowRoot.querySelector("slot");
+    if (s === null) return;
+    const n = (t = (i = s.assignedElements) === null || i === void 0 ? void 0 : i.call(s, {
+      flatten: true
+    })) !== null && t !== void 0 ? t : [];
+    // Unwatch previous elements
+        (e = this.observedElements) === null || e === void 0 ? void 0 : e.forEach((i => this.resizeObserver.unobserve(i)));
+    this.observedElements = [];
+    // Watch new elements
+        n.forEach((i => {
+      var t;
+      (t = this.resizeObserver) === null || t === void 0 ? void 0 : t.observe(i);
+      this.observedElements.push(i);
+    }));
+  }
+  stopObserver() {
+    var i;
+    (i = this.resizeObserver) === null || i === void 0 ? void 0 : i.disconnect();
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    return e("slot", {
+      key: "054e80a957d13bd3226c6db7ca07be3764283974",
+      onSlotchange: this.handleSlotChange
+    });
+  }
+  get hostElement() {
+    return s(this);
+  }
+  static get watchers() {
+    return {
+      disabled: [ "disabledUpdated" ]
+    };
+  }
+};
+
+r.style = o;
+
+export { r as q2_resize_observer };
+//# sourceMappingURL=q2-resize-observer.entry.js.map

package/dist/q2-tecton-elements/{p-e2c800ef.entry.js.map → q2-resize-observer.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["q2ResizeObserverCss","Q2ResizeObserverStyle0","Q2ResizeObserver","this","observedElements","handleSlotChange","disabled","startObserver","disconnectedCallback","stopObserver","resizeObserver","componentDidLoad","window","ResizeObserver","resizeEntries","tctResize","emit","entries","currentResizeObserverEntries","console","warn","getCurrentResizeEntries","disabledUpdated","newVal","slot","hostElement","shadowRoot","querySelector","elements","_b","_a","assignedElements","call","flatten","_c","forEach","el","unobserve","observe","push","disconnect","render","h","key","onSlotchange"],"sources":["src/components/q2-resize-observer/q2-resize-observer.scss?tag=q2-resize-observer&encapsulation=shadow","src/components/q2-resize-observer/q2-resize-observer.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host(:not([hidden])) {\n    display: block;\n    width: 100%;\n}\n","import { Component, ComponentInterface, Element, EventEmitter, h, Prop, Event, Method, Watch } from '@stencil/core';\n\n@Component({\n    tag: 'q2-resize-observer',\n    styleUrl: 'q2-resize-observer.scss',\n    shadow: true,\n})\nexport class Q2ResizeObserver implements ComponentInterface {\n    // #region Own Properties\n\n    currentResizeObserverEntries: ResizeObserverEntry[];\n    observedElements: HTMLElement[] = [];\n    resizeObserver?: ResizeObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Determines wheter or not events will be emitted from the component.\n     */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when any of the observed elements are resized.\n     */\n    @Event()\n    tctResize: EventEmitter<{ entries: ResizeObserverEntry[] }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.stopObserver();\n        this.resizeObserver = null;\n    }\n\n    componentDidLoad() {\n        if ('ResizeObserver' in window) {\n            this.resizeObserver = new ResizeObserver(resizeEntries => {\n                this.tctResize.emit({ entries: resizeEntries });\n                this.currentResizeObserverEntries = resizeEntries;\n            });\n        } else {\n            console.warn('ResizeObserver is not defined.');\n        }\n\n        if (!this.disabled) {\n            this.startObserver();\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Returns the latest entries reported by the component.\n     */\n    @Method()\n    async getCurrentResizeEntries(): Promise<ResizeObserverEntry[]> {\n        return this.currentResizeObserverEntries || [];\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledUpdated(newVal: boolean) {\n        if (newVal) {\n            this.stopObserver();\n        } else {\n            this.startObserver();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleSlotChange = () => {\n        if (this.disabled) return;\n        this.startObserver();\n    };\n\n    startObserver() {\n        const slot = this.hostElement.shadowRoot!.querySelector('slot');\n        if (slot === null) return;\n\n        const elements = (slot.assignedElements?.({ flatten: true }) as HTMLElement[]) ?? [];\n\n        // Unwatch previous elements\n        this.observedElements?.forEach(el => this.resizeObserver.unobserve(el));\n        this.observedElements = [];\n\n        // Watch new elements\n        elements.forEach(el => {\n            this.resizeObserver?.observe(el);\n            this.observedElements.push(el);\n        });\n    }\n\n    stopObserver() {\n        this.resizeObserver?.disconnect();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return <slot onSlotchange={this.handleSlotChange} />;\n    }\n\n    // #endregion\n}\n"],"mappings":"yDAAA,MAAMA,EAAsB,ysBAC5B,MAAAC,EAAeD,E,MCMFE,EAAgB,M,8DAIzBC,KAAAC,iBAAkC,GA4ElCD,KAAAE,iBAAmB,KACf,GAAIF,KAAKG,SAAU,OACnBH,KAAKI,eAAe,E,wBAhDxB,oBAAAC,GACIL,KAAKM,eACLN,KAAKO,eAAiB,I,CAG1B,gBAAAC,GACI,GAAI,mBAAoBC,OAAQ,CAC5BT,KAAKO,eAAiB,IAAIG,gBAAeC,IACrCX,KAAKY,UAAUC,KAAK,CAAEC,QAASH,IAC/BX,KAAKe,6BAA+BJ,CAAa,G,KAElD,CACHK,QAAQC,KAAK,iC,CAGjB,IAAKjB,KAAKG,SAAU,CAChBH,KAAKI,e,EAWb,6BAAMc,GACF,OAAOlB,KAAKe,8BAAgC,E,CAOhD,eAAAI,CAAgBC,GACZ,GAAIA,EAAQ,CACRpB,KAAKM,c,KACF,CACHN,KAAKI,e,EAYb,aAAAA,G,UACI,MAAMiB,EAAOrB,KAAKsB,YAAYC,WAAYC,cAAc,QACxD,GAAIH,IAAS,KAAM,OAEnB,MAAMI,GAAWC,GAACC,EAAAN,EAAKO,oBAAgB,MAAAD,SAAA,SAAAA,EAAAE,KAAAR,EAAG,CAAES,QAAS,UAAyB,MAAAJ,SAAA,EAAAA,EAAI,IAGlFK,EAAA/B,KAAKC,oBAAgB,MAAA8B,SAAA,SAAAA,EAAEC,SAAQC,GAAMjC,KAAKO,eAAe2B,UAAUD,KACnEjC,KAAKC,iBAAmB,GAGxBwB,EAASO,SAAQC,I,OACbN,EAAA3B,KAAKO,kBAAc,MAAAoB,SAAA,SAAAA,EAAEQ,QAAQF,GAC7BjC,KAAKC,iBAAiBmC,KAAKH,EAAG,G,CAItC,YAAA3B,G,OACIqB,EAAA3B,KAAKO,kBAAc,MAAAoB,SAAA,SAAAA,EAAEU,Y,CAMzB,MAAAC,GACI,OAAOC,EAAA,QAAAC,IAAA,2CAAMC,aAAczC,KAAKE,kB"}
+{"version":3,"names":["q2ResizeObserverCss","Q2ResizeObserverStyle0","Q2ResizeObserver","this","observedElements","handleSlotChange","disabled","startObserver","disconnectedCallback","stopObserver","resizeObserver","componentDidLoad","window","ResizeObserver","resizeEntries","tctResize","emit","entries","currentResizeObserverEntries","console","warn","getCurrentResizeEntries","disabledUpdated","newVal","slot","hostElement","shadowRoot","querySelector","elements","_b","_a","assignedElements","call","flatten","_c","forEach","el","unobserve","observe","push","disconnect","render","h","key","onSlotchange"],"sources":["src/components/q2-resize-observer/q2-resize-observer.scss?tag=q2-resize-observer&encapsulation=shadow","src/components/q2-resize-observer/q2-resize-observer.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host(:not([hidden])) {\n    display: block;\n    width: 100%;\n}\n","import { Component, ComponentInterface, Element, EventEmitter, h, Prop, Event, Method, Watch } from '@stencil/core';\n\n@Component({\n    tag: 'q2-resize-observer',\n    styleUrl: 'q2-resize-observer.scss',\n    shadow: true,\n})\nexport class Q2ResizeObserver implements ComponentInterface {\n    // #region Own Properties\n\n    currentResizeObserverEntries: ResizeObserverEntry[];\n    observedElements: HTMLElement[] = [];\n    resizeObserver?: ResizeObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Determines wheter or not events will be emitted from the component.\n     */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when any of the observed elements are resized.\n     */\n    @Event()\n    tctResize: EventEmitter<{ entries: ResizeObserverEntry[] }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.stopObserver();\n        this.resizeObserver = null;\n    }\n\n    componentDidLoad() {\n        if ('ResizeObserver' in window) {\n            this.resizeObserver = new ResizeObserver(resizeEntries => {\n                this.tctResize.emit({ entries: resizeEntries });\n                this.currentResizeObserverEntries = resizeEntries;\n            });\n        } else {\n            console.warn('ResizeObserver is not defined.');\n        }\n\n        if (!this.disabled) {\n            this.startObserver();\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Returns the latest entries reported by the component.\n     */\n    @Method()\n    async getCurrentResizeEntries(): Promise<ResizeObserverEntry[]> {\n        return this.currentResizeObserverEntries || [];\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledUpdated(newVal: boolean) {\n        if (newVal) {\n            this.stopObserver();\n        } else {\n            this.startObserver();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleSlotChange = () => {\n        if (this.disabled) return;\n        this.startObserver();\n    };\n\n    startObserver() {\n        const slot = this.hostElement.shadowRoot!.querySelector('slot');\n        if (slot === null) return;\n\n        const elements = (slot.assignedElements?.({ flatten: true }) as HTMLElement[]) ?? [];\n\n        // Unwatch previous elements\n        this.observedElements?.forEach(el => this.resizeObserver.unobserve(el));\n        this.observedElements = [];\n\n        // Watch new elements\n        elements.forEach(el => {\n            this.resizeObserver?.observe(el);\n            this.observedElements.push(el);\n        });\n    }\n\n    stopObserver() {\n        this.resizeObserver?.disconnect();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return <slot onSlotchange={this.handleSlotChange} />;\n    }\n\n    // #endregion\n}\n"],"mappings":";;AAAA,MAAMA,IAAsB;;AAC5B,MAAAC,IAAeD;;MCMFE,IAAgB;;;;IAIzBC,KAAAC,mBAAkC;;;QA4ElCD,KAAAE,mBAAmB;MACf,IAAIF,KAAKG,UAAU;MACnBH,KAAKI;AAAe;;;;;EAhDxB,oBAAAC;IACIL,KAAKM;IACLN,KAAKO,iBAAiB;;EAG1B,gBAAAC;IACI,IAAI,oBAAoBC,QAAQ;MAC5BT,KAAKO,iBAAiB,IAAIG,gBAAeC;QACrCX,KAAKY,UAAUC,KAAK;UAAEC,SAASH;;QAC/BX,KAAKe,+BAA+BJ;AAAa;WAElD;MACHK,QAAQC,KAAK;;IAGjB,KAAKjB,KAAKG,UAAU;MAChBH,KAAKI;;;;;;;;EAWb,6BAAMc;IACF,OAAOlB,KAAKe,gCAAgC;;;;EAOhD,eAAAI,CAAgBC;IACZ,IAAIA,GAAQ;MACRpB,KAAKM;WACF;MACHN,KAAKI;;;EAYb,aAAAA;;IACI,MAAMiB,IAAOrB,KAAKsB,YAAYC,WAAYC,cAAc;IACxD,IAAIH,MAAS,MAAM;IAEnB,MAAMI,KAAWC,KAACC,IAAAN,EAAKO,sBAAgB,QAAAD,WAAA,aAAAA,EAAAE,KAAAR,GAAG;MAAES,SAAS;YAAyB,QAAAJ,WAAA,IAAAA,IAAI;;SAGlFK,IAAA/B,KAAKC,sBAAgB,QAAA8B,WAAA,aAAAA,EAAEC,SAAQC,KAAMjC,KAAKO,eAAe2B,UAAUD;IACnEjC,KAAKC,mBAAmB;;QAGxBwB,EAASO,SAAQC;;OACbN,IAAA3B,KAAKO,oBAAc,QAAAoB,WAAA,aAAAA,EAAEQ,QAAQF;MAC7BjC,KAAKC,iBAAiBmC,KAAKH;AAAG;;EAItC,YAAA3B;;KACIqB,IAAA3B,KAAKO,oBAAc,QAAAoB,WAAA,aAAAA,EAAEU;;;;EAMzB,MAAAC;IACI,OAAOC,EAAA;MAAAC,KAAA;MAAMC,cAAczC,KAAKE"}

package/dist/q2-tecton-elements/q2-section.entry.js

@@ -0,0 +1,256 @@
+import { r as t, c as e, h as i, g as n } from "./index-7a5365e2.js";
+
+import { m as s, o as a, i as r, n as o, l as c } from "./index-d18e2a20.js";
+
+const d = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;background:var(--tct-section-background, var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff))))));color:var(--tct-section-font-color, var(--t-section-font-color, var(--t-text, #4d4d4d)));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 4px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)));border-width:var(--tct-section-border-width, 0);border-style:var(--tct-section-border-style, solid);border-color:var(--tct-section-border-color, none)}@media screen and (max-width: 767px){:host{--comp-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)))}}@media print{:host{--comp-default-print-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-print-margin, var(--comp-default-print-margin))}}.wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));--comp-default-wrapper-padding:var(--app-scale-1x, 5px) 0;display:block;padding:var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)))}.wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit))}:host([collapsible]) .wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)))}header{--comp-default-header-padding:0 var(--app-scale-3x, 15px);padding:var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));display:flex}@media print{header{padding:var(--tct-section-header-print-padding, 0)}}header.has-header{min-height:var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px))}.header-content{flex:1 1 100%;min-width:0;align-self:center}:host([collapsible]) .header-content{cursor:pointer}.title{margin:var(--tct-section-title-margin, 0);font-size:var(--tct-section-title-font-size, 20px);font-weight:var(--tct-section-title-font-weight, 600);text-transform:var(--tct-section-title-text-transform, none);letter-spacing:var(--tct-section-title-letter-spacing, 0.5px)}q2-icon{transition:transform var(--comp-tween)}:host(:not([expanded])) q2-icon,:host([expanded=false]) q2-icon{transform:rotate(180deg)}.content-wrapper{height:auto}.content-wrapper.is-closed{display:none;overflow:hidden}.content-wrapper.is-transitioning{overflow:hidden}:host([collapsible]) .content-wrapper{transition:height var(--comp-tween)}.content{--comp-default-content-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)))}@media print{.content{padding:var(--tct-section-content-print-padding, 0)}}.content:focus{box-shadow:none}:host([collapsible]) :host(:not([expanded])) .content{visibility:hidden}";
+
+const h = d;
+
+const p = class {
+  constructor(i) {
+    t(this, i);
+    this.change = e(this, "change", 7);
+    this.contentId = "content";
+    this.titleId = "title";
+    this.addContentSlotListener = () => {
+      if (this.contentSlot) {
+        this.contentSlot.addEventListener("slotchange", s);
+        return;
+      }
+      const t = new MutationObserver(s);
+      t.observe(this.contentContainer, {
+        childList: true,
+        subtree: true
+      });
+      this.contentSlotMutationObserver = t;
+    };
+    this.addHeaderSlotListener = () => {
+      if (this.headerSlot) {
+        this.headerSlot.addEventListener("slotchange", this.onHeaderSlotChange);
+        return;
+      }
+      const t = new MutationObserver(this.onHeaderSlotChange);
+      t.observe(this.headerSlotWrapper, {
+        childList: true
+      });
+      this.headerSlotMutationObserver = t;
+    };
+    this.clearResizeInterval = () => {
+      this.resizerFn && clearInterval(this.resizerFn);
+    };
+    this.onHeaderClick = () => {
+      this.change.emit({
+        expanded: !this.expanded
+      });
+    };
+    this.onHeaderSlotChange = () => {
+      const t = !!this.hostElement.querySelector('[slot="q2-section-header"]');
+      if (this.hasYieldedHeader !== t) {
+        this.hasYieldedHeader = !!t;
+      }
+    };
+    this.onTransitionEnd = () => {
+      if (this.expanded) {
+        this.contentHeight = undefined;
+      } else {
+        this.hideContent = true;
+      }
+      setTimeout((() => {
+        // This gives enough time for all values to get passed over
+        // Previously, the interval was never cleared and the fn was called indefinitely then filtered
+        // Will revisit in TCT-599
+        this.clearResizeInterval();
+      }), 1e3);
+    };
+    this.removeContentSlotListener = () => {
+      var t;
+      if (this.contentSlot) {
+        this.contentSlot.removeEventListener("slotchange", s);
+        return;
+      }
+      (t = this.contentSlotMutationObserver) === null || t === void 0 ? void 0 : t.disconnect();
+    };
+    this.removeHeaderSlotListener = () => {
+      var t;
+      if (this.headerSlot) {
+        this.headerSlot.removeEventListener("slotchange", this.onHeaderSlotChange);
+        return;
+      }
+      (t = this.headerSlotMutationObserver) === null || t === void 0 ? void 0 : t.disconnect();
+    };
+    this.contentHeight = undefined;
+    this.hasYieldedHeader = false;
+    this.hideContent = false;
+    this.collapsible = undefined;
+    this.expanded = undefined;
+    this.label = undefined;
+    this.noCollapseIcon = undefined;
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  disconnectedCallback() {
+    this.removeHeaderSlotListener();
+    this.removeContentSlotListener();
+  }
+  componentWillLoad() {
+    this.onHeaderSlotChange();
+    const {collapsible: t, expanded: e} = this;
+    this.contentHeight = t && e ? undefined : "0px";
+    this.hideContent = !e;
+  }
+  componentDidLoad() {
+    this.addHeaderSlotListener();
+    this.addContentSlotListener();
+    a(this.hostElement);
+  }
+  // #endregion
+  // #region Listeners
+  defaultChangeHandler(t) {
+    if (t.target === this.hostElement && !this.hostElement.onchange && !!t.detail) {
+      this.expanded = t.detail.expanded;
+    }
+  }
+  delegateFocus(t) {
+    if (!r(t, this.hostElement)) return;
+    this.contentContainer.focus();
+  }
+  // #endregion
+  // #region Watchers
+  collapsibleObserver() {
+    this.contentHeight = this.currentHeight;
+  }
+  async expandedObserver(t) {
+    this.clearResizeInterval();
+    this.resizerFn = setInterval(s, 5);
+    if (t) {
+      this.expandSection();
+    } else {
+      this.collapseSection();
+    }
+  }
+  // #endregion
+  // #region Test Methods API
+  /**
+     * A test method to collapse section.
+     *
+     * @testOnly
+     */
+  async collapse() {
+    if (!this.collapsible || !this.expanded) return;
+    const t = this.hostElement.shadowRoot.querySelector('[test-id="toggleButton"]');
+    t === null || t === void 0 ? void 0 : t.click();
+  }
+  /**
+     * A test method to expand section.
+     *
+     * @testOnly
+     */  async expand() {
+    if (!this.collapsible || this.expanded) return;
+    const t = this.hostElement.shadowRoot.querySelector('[test-id="toggleButton"]');
+    t === null || t === void 0 ? void 0 : t.click();
+  }
+  // #endregion
+  // #region Local Methods
+  get contentContainerHeight() {
+    return `${this.contentContainer.offsetHeight || 0}px`;
+  }
+  get currentHeight() {
+    const {collapsible: t, expanded: e} = this;
+    if (!t) {
+      return null;
+    } else if (e) {
+      return this.contentContainerHeight;
+    } else {
+      return "0";
+    }
+  }
+  async collapseSection() {
+    this.contentHeight = this.contentContainerHeight;
+    await o((() => {
+      this.contentHeight = this.currentHeight;
+    }));
+  }
+  async expandSection() {
+    this.hideContent = false;
+    await o((() => {
+      this.contentHeight = this.currentHeight;
+    }));
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    const t = this.label || this.hasYieldedHeader;
+    const e = [ "content-wrapper" ];
+    const {collapsible: n, hideContent: s, contentHeight: a} = this;
+    if (n) {
+      if (s) e.push("is-closed"); else if (a) e.push("is-transitioning");
+    }
+    const r = !this.hasYieldedHeader && !!this.label;
+    return i("section", {
+      key: "51caab18e84c01492e56a6146130fd62fe54ca70",
+      class: "wrapper"
+    }, i("header", {
+      key: "8badc2ccc5b350a005b8d22b69177d7018f34284",
+      class: t ? "has-header" : ""
+    }, i("div", {
+      key: "2af884fba47086257db63b7367d24c308d1b1e77",
+      class: "header-content",
+      id: this.titleId,
+      onClick: this.collapsible && this.onHeaderClick
+    }, r && i("h2", {
+      key: "32dcbaa44045c162fd41c14899192082fceb457e",
+      class: "title"
+    }, c(this.label)), i("div", {
+      key: "38535337690457635e0ffb1233c715c3d0f84cb5",
+      ref: t => this.headerSlotWrapper = t,
+      class: "header-slot-wrapper"
+    }, i("slot", {
+      key: "2e95134d388a51d7e4743a57b1ed102829ce43c6",
+      ref: t => this.headerSlot = t,
+      name: "q2-section-header"
+    }))), this.collapsible && !this.noCollapseIcon && i("q2-btn", {
+      key: "f7a91d6201e6be895e74a83d77e6b957e8eaba84",
+      label: c(this.label || "tecton.element.section.defaultToggleLabel"),
+      ariaExpanded: `${!!this.expanded}`,
+      ariaControls: this.contentId,
+      "test-id": "toggleButton",
+      "hide-label": true,
+      onClick: this.onHeaderClick
+    }, i("q2-icon", {
+      key: "a6677b9ad7903ba53ed6460c839421fb134a74a0",
+      type: "chevron-up"
+    }))), i("div", {
+      key: "0b8be5db6874002b6320ba62b42473ee6b55830a",
+      class: e.join(" "),
+      id: this.contentId,
+      "aria-labelledby": this.titleId,
+      role: "region",
+      onTransitionEnd: this.onTransitionEnd,
+      style: this.collapsible && {
+        height: this.contentHeight
+      }
+    }, i("div", {
+      key: "42968fd4be0401dcca23f6f84ce2db123e88d722",
+      ref: t => this.contentContainer = t,
+      class: "content",
+      tabindex: "-1"
+    }, i("slot", {
+      key: "919c3f6a65a945581deb258b10ad3877182389c4",
+      ref: t => this.contentSlot = t
+    }))));
+  }
+  get hostElement() {
+    return n(this);
+  }
+  static get watchers() {
+    return {
+      collapsible: [ "collapsibleObserver" ],
+      expanded: [ "expandedObserver" ]
+    };
+  }
+};
+
+p.style = h;
+
+export { p as q2_section };
+//# sourceMappingURL=q2-section.entry.js.map

package/dist/q2-tecton-elements/q2-section.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["q2SectionCss","Q2SectionStyle0","Q2Section","this","contentId","titleId","addContentSlotListener","contentSlot","addEventListener","resizeIframe","observer","MutationObserver","observe","contentContainer","childList","subtree","contentSlotMutationObserver","addHeaderSlotListener","headerSlot","onHeaderSlotChange","headerSlotWrapper","headerSlotMutationObserver","clearResizeInterval","resizerFn","clearInterval","onHeaderClick","change","emit","expanded","hasSlotContent","hostElement","querySelector","hasYieldedHeader","onTransitionEnd","contentHeight","undefined","hideContent","setTimeout","removeContentSlotListener","removeEventListener","_a","disconnect","removeHeaderSlotListener","disconnectedCallback","componentWillLoad","collapsible","componentDidLoad","overrideFocus","defaultChangeHandler","event","target","onchange","detail","delegateFocus","isEventFromElement","focus","collapsibleObserver","currentHeight","expandedObserver","setInterval","expandSection","collapseSection","collapse","btn","shadowRoot","click","expand","contentContainerHeight","offsetHeight","nextPaint","render","hasHeader","label","wrapperClasses","push","showDefaultHeader","h","key","class","id","onClick","loc","ref","el","name","noCollapseIcon","ariaExpanded","ariaControls","type","join","role","style","height","tabindex"],"sources":["src/components/q2-section/q2-section.scss?tag=q2-section&encapsulation=shadow","src/components/q2-section/q2-section.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions.scss';\n\n:host {\n    display: block;\n    background: var-list(\n        --tct-section-background,\n        var-prefixer(section-background-color),\n        var-prefixer(section-bg),\n        --app-white,\n        #ffffff\n    );\n    color: var-list(var-prefixer(section-font-color), --t-text, #4d4d4d);\n    border-radius: var-list(var-prefixer(section-border-radius), --app-border-radius-1, 4px);\n    margin: var-list(var-prefixer(section-margin), --app-scale-3x, 15px);\n    border-width: var-list(--tct-section-border-width, 0);\n    border-style: var-list(--tct-section-border-style, solid);\n    border-color: var-list(--tct-section-border-color, none);\n\n    @media screen and (max-width: 767px) {\n        --comp-default-margin: var(--app-scale-3x, 15px) 0;\n        margin: var-list(var-prefixer(section-margin), --comp-default-margin);\n    }\n\n    @media print {\n        --comp-default-print-margin: var(--app-scale-3x, 15px) 0;\n        margin: var-list(--tct-section-print-margin, --comp-default-print-margin);\n    }\n}\n\n.wrapper {\n    --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-1, unquote('0.2s ease'))};\n    --comp-default-wrapper-padding: var(--app-scale-1x, 5px) 0;\n    display: block;\n    padding: var-list(var-prefixer(section-wrapper-padding), --comp-default-wrapper-padding);\n\n    &:hover {\n        box-shadow: var-list(var-prefixer(section-wrapper-hover-box-shadow), inherit);\n    }\n\n    :host([collapsible]) & {\n        --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-2, unquote('0.4s ease'))};\n    }\n}\n\nheader {\n    --comp-default-header-padding: 0 var(--app-scale-3x, 15px);\n    padding: var-list(var-prefixer(section-header-padding), --comp-default-header-padding);\n    display: flex;\n\n    @media print {\n        padding: var-list(--tct-section-header-print-padding, 0);\n    }\n\n    &.has-header {\n        min-height: var-list(var-prefixer(section-header-min-height), 44px);\n    }\n}\n\n.header-content {\n    flex: 1 1 100%;\n    min-width: 0;\n    align-self: center;\n\n    :host([collapsible]) & {\n        cursor: pointer;\n    }\n}\n\n.title {\n    margin: var-list(--tct-section-title-margin, 0);\n    font-size: var-list(--tct-section-title-font-size, 20px);\n    font-weight: var-list(--tct-section-title-font-weight, 600);\n    text-transform: var-list(--tct-section-title-text-transform, none);\n    letter-spacing: var-list(--tct-section-title-letter-spacing, 0.5px);\n}\n\nq2-icon {\n    transition: transform var(--comp-tween);\n\n    :host(:not([expanded])) &,\n    :host([expanded='false']) & {\n        transform: rotate(180deg);\n    }\n}\n\n.content-wrapper {\n    height: auto;\n\n    &.is-closed {\n        display: none;\n        overflow: hidden;\n    }\n\n    &.is-transitioning {\n        overflow: hidden;\n    }\n\n    :host([collapsible]) & {\n        transition: height var(--comp-tween);\n    }\n}\n\n.content {\n    --comp-default-content-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n    padding: var-list(var-prefixer(section-content-padding), --comp-default-content-padding);\n\n    @media print {\n        padding: var-list(--tct-section-content-print-padding, 0);\n    }\n\n    &:focus {\n        box-shadow: none;\n    }\n\n    :host([collapsible]) :host(:not([expanded])) & {\n        visibility: hidden;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Listen,\n    State,\n    Watch,\n    h,\n    Event,\n    EventEmitter,\n    Method,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus, resizeIframe } from 'src/utils';\n\n@Component({ tag: 'q2-section', shadow: true, styleUrl: 'q2-section.scss' })\nexport class Q2Section implements ComponentInterface {\n    // #region Own Properties\n\n    contentContainer: HTMLDivElement;\n    contentId: string = 'content';\n    contentSlot: HTMLSlotElement;\n    contentSlotMutationObserver: MutationObserver;\n    headerSlot: HTMLSlotElement;\n    headerSlotMutationObserver: MutationObserver;\n    headerSlotWrapper: HTMLDivElement;\n    resizerFn: NodeJS.Timeout | undefined;\n    titleId: string = 'title';\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    contentHeight: string;\n\n    @State()\n    hasYieldedHeader: boolean = false;\n\n    @State()\n    hideContent: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines if the section is collapsible. */\n    @Prop({ reflect: true })\n    collapsible: boolean;\n\n    /** Indicates if the `q2-section` is in an expanded state or not. */\n    @Prop({ reflect: true, mutable: true })\n    expanded: boolean;\n\n    /**\n     * The text to display above the `q2-section`. Renders as an `<h2>` element.\n     *\n     * It is also used to provided an `aria-label` for the toggle button when the component is collapsible.\n     *\n     * @warning\n     * If you are providing a custom header, setting this property is still strongly encouraged for the purposes of\n     * accessibility.\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Determines if the collapse chevron icon should show in the `q2-section` header. */\n    @Prop({ reflect: true })\n    noCollapseIcon: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the section is expanded or collapsed.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ expanded: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.removeHeaderSlotListener();\n        this.removeContentSlotListener();\n    }\n\n    componentWillLoad() {\n        this.onHeaderSlotChange();\n        const { collapsible, expanded } = this;\n        this.contentHeight = collapsible && expanded ? undefined : '0px';\n        this.hideContent = !expanded;\n    }\n\n    componentDidLoad() {\n        this.addHeaderSlotListener();\n        this.addContentSlotListener();\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {\n            this.expanded = event.detail.expanded;\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.contentContainer.focus();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('collapsible')\n    collapsibleObserver() {\n        this.contentHeight = this.currentHeight;\n    }\n\n    @Watch('expanded')\n    async expandedObserver(expanded: boolean) {\n        this.clearResizeInterval();\n        this.resizerFn = setInterval(resizeIframe, 5);\n\n        if (expanded) {\n            this.expandSection();\n        } else {\n            this.collapseSection();\n        }\n    }\n\n    // #endregion\n    // #region Test Methods API\n\n    /**\n     * A test method to collapse section.\n     *\n     * @testOnly\n     */\n    @Method()\n    async collapse() {\n        if (!this.collapsible || !this.expanded) return;\n        const btn = this.hostElement.shadowRoot.querySelector('[test-id=\"toggleButton\"]');\n        (btn as HTMLQ2BtnElement)?.click();\n    }\n\n    /**\n     * A test method to expand section.\n     *\n     * @testOnly\n     */\n    @Method()\n    async expand() {\n        if (!this.collapsible || this.expanded) return;\n        const btn = this.hostElement.shadowRoot.querySelector('[test-id=\"toggleButton\"]');\n        (btn as HTMLQ2BtnElement)?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get contentContainerHeight() {\n        return `${this.contentContainer.offsetHeight || 0}px`;\n    }\n\n    get currentHeight() {\n        const { collapsible, expanded } = this;\n        if (!collapsible) {\n            return null;\n        } else if (expanded) {\n            return this.contentContainerHeight;\n        } else {\n            return '0';\n        }\n    }\n\n    addContentSlotListener = () => {\n        if (this.contentSlot) {\n            this.contentSlot.addEventListener('slotchange', resizeIframe);\n            return;\n        }\n\n        const observer = new MutationObserver(resizeIframe);\n        observer.observe(this.contentContainer, { childList: true, subtree: true });\n        this.contentSlotMutationObserver = observer;\n    };\n\n    addHeaderSlotListener = () => {\n        if (this.headerSlot) {\n            this.headerSlot.addEventListener('slotchange', this.onHeaderSlotChange);\n            return;\n        }\n\n        const observer = new MutationObserver(this.onHeaderSlotChange);\n        observer.observe(this.headerSlotWrapper, { childList: true });\n        this.headerSlotMutationObserver = observer;\n    };\n\n    clearResizeInterval = () => {\n        this.resizerFn && clearInterval(this.resizerFn);\n    };\n\n    async collapseSection() {\n        this.contentHeight = this.contentContainerHeight;\n        await nextPaint(() => {\n            this.contentHeight = this.currentHeight;\n        });\n    }\n\n    async expandSection() {\n        this.hideContent = false;\n        await nextPaint(() => {\n            this.contentHeight = this.currentHeight;\n        });\n    }\n\n    onHeaderClick = () => {\n        this.change.emit({\n            expanded: !this.expanded,\n        });\n    };\n\n    onHeaderSlotChange = () => {\n        const hasSlotContent = !!this.hostElement.querySelector('[slot=\"q2-section-header\"]');\n\n        if (this.hasYieldedHeader !== hasSlotContent) {\n            this.hasYieldedHeader = !!hasSlotContent;\n        }\n    };\n\n    onTransitionEnd = () => {\n        if (this.expanded) {\n            this.contentHeight = undefined;\n        } else {\n            this.hideContent = true;\n        }\n\n        setTimeout(() => {\n            // This gives enough time for all values to get passed over\n            // Previously, the interval was never cleared and the fn was called indefinitely then filtered\n            // Will revisit in TCT-599\n            this.clearResizeInterval();\n        }, 1000);\n    };\n\n    removeContentSlotListener = () => {\n        if (this.contentSlot) {\n            this.contentSlot.removeEventListener('slotchange', resizeIframe);\n            return;\n        }\n        this.contentSlotMutationObserver?.disconnect();\n    };\n\n    removeHeaderSlotListener = () => {\n        if (this.headerSlot) {\n            this.headerSlot.removeEventListener('slotchange', this.onHeaderSlotChange);\n            return;\n        }\n\n        this.headerSlotMutationObserver?.disconnect();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const hasHeader = this.label || this.hasYieldedHeader;\n        const wrapperClasses = ['content-wrapper'];\n        const { collapsible, hideContent, contentHeight } = this;\n        if (collapsible) {\n            if (hideContent) wrapperClasses.push('is-closed');\n            else if (contentHeight) wrapperClasses.push('is-transitioning');\n        }\n\n        const showDefaultHeader = !this.hasYieldedHeader && !!this.label;\n\n        return (\n            <section class=\"wrapper\">\n                <header class={hasHeader ? 'has-header' : ''}>\n                    <div\n                        class=\"header-content\"\n                        id={this.titleId}\n                        onClick={this.collapsible && this.onHeaderClick}\n                    >\n                        {showDefaultHeader && <h2 class=\"title\">{loc(this.label)}</h2>}\n                        <div\n                            ref={el => (this.headerSlotWrapper = el)}\n                            class=\"header-slot-wrapper\"\n                        >\n                            <slot\n                                ref={(el: HTMLSlotElement) => (this.headerSlot = el)}\n                                name=\"q2-section-header\"\n                            />\n                        </div>\n                    </div>\n                    {this.collapsible && !this.noCollapseIcon && (\n                        <q2-btn\n                            label={loc(this.label || 'tecton.element.section.defaultToggleLabel')}\n                            ariaExpanded={`${!!this.expanded}`}\n                            ariaControls={this.contentId}\n                            test-id=\"toggleButton\"\n                            hide-label\n                            onClick={this.onHeaderClick}\n                        >\n                            <q2-icon type=\"chevron-up\" />\n                        </q2-btn>\n                    )}\n                </header>\n                <div\n                    class={wrapperClasses.join(' ')}\n                    id={this.contentId}\n                    aria-labelledby={this.titleId}\n                    role=\"region\"\n                    onTransitionEnd={this.onTransitionEnd}\n                    style={\n                        this.collapsible && {\n                            height: this.contentHeight,\n                        }\n                    }\n                >\n                    <div\n                        ref={el => (this.contentContainer = el)}\n                        class=\"content\"\n                        tabindex=\"-1\"\n                    >\n                        <slot ref={(el: HTMLSlotElement) => (this.contentSlot = el)} />\n                    </div>\n                </div>\n            </section>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}