@govtechsg/sgds-web-component 3.6.0-rc.2 → 3.6.0
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/base/button.js +1 -1
- package/components/Alert/index.umd.min.js +17 -17
- package/components/Alert/index.umd.min.js.map +1 -1
- package/components/Alert/sgds-alert.d.ts +1 -1
- package/components/Alert/sgds-alert.js +2 -2
- package/components/Alert/sgds-alert.js.map +1 -1
- package/components/Badge/index.umd.min.js +16 -16
- package/components/Badge/index.umd.min.js.map +1 -1
- package/components/Badge/sgds-badge.d.ts +1 -1
- package/components/Badge/sgds-badge.js +2 -2
- package/components/Badge/sgds-badge.js.map +1 -1
- package/components/Breadcrumb/index.umd.min.js +17 -17
- package/components/Breadcrumb/index.umd.min.js.map +1 -1
- package/components/Breadcrumb/sgds-breadcrumb-item.d.ts +1 -0
- package/components/Breadcrumb/sgds-breadcrumb-item.js +5 -2
- package/components/Breadcrumb/sgds-breadcrumb-item.js.map +1 -1
- package/components/Button/index.umd.min.js +1 -1
- package/components/Card/index.umd.min.js.map +1 -1
- package/components/Card/sgds-card.js.map +1 -1
- package/components/CloseButton/close-button.js +6 -0
- package/components/CloseButton/index.js +5 -0
- package/components/CloseButton/index.js.map +1 -0
- package/components/CloseButton/index.umd.min.js +50 -0
- package/components/CloseButton/index.umd.min.js.map +1 -0
- package/{internals → components}/CloseButton/sgds-close-button.d.ts +2 -4
- package/{internals → components}/CloseButton/sgds-close-button.js +4 -10
- package/components/CloseButton/sgds-close-button.js.map +1 -0
- package/components/ComboBox/index.umd.min.js +18 -18
- package/components/ComboBox/index.umd.min.js.map +1 -1
- package/components/Datepicker/index.umd.min.js +1 -1
- package/components/Datepicker/index.umd.min.js.map +1 -1
- package/components/Drawer/index.umd.min.js +6 -11
- package/components/Drawer/index.umd.min.js.map +1 -1
- package/components/Drawer/sgds-drawer.d.ts +1 -1
- package/components/Drawer/sgds-drawer.js +1 -1
- package/components/Drawer/sgds-drawer.js.map +1 -1
- package/components/FileUpload/index.umd.min.js +26 -26
- package/components/FileUpload/index.umd.min.js.map +1 -1
- package/components/FileUpload/sgds-file-upload.d.ts +1 -1
- package/components/FileUpload/sgds-file-upload.js +1 -1
- package/components/FileUpload/sgds-file-upload.js.map +1 -1
- package/components/Footer/footer-item.js +1 -1
- package/components/Footer/footer.js +1 -1
- package/components/Footer/index.umd.min.js +17 -17
- package/components/Footer/index.umd.min.js.map +1 -1
- package/components/Footer/sgds-footer-item.d.ts +1 -0
- package/components/Footer/sgds-footer-item.js +11 -1
- package/components/Footer/sgds-footer-item.js.map +1 -1
- package/components/Footer/sgds-footer.js +7 -7
- package/components/Footer/sgds-footer.js.map +1 -1
- package/components/IconButton/index.umd.min.js +1 -1
- package/components/IconCard/index.umd.min.js.map +1 -1
- package/components/IconCard/sgds-icon-card.js.map +1 -1
- package/components/ImageCard/index.umd.min.js.map +1 -1
- package/components/ImageCard/sgds-image-card.js.map +1 -1
- package/components/Input/index.umd.min.js.map +1 -1
- package/components/Input/sgds-input.js.map +1 -1
- package/components/Link/index.umd.min.js +9 -9
- package/components/Link/index.umd.min.js.map +1 -1
- package/components/Link/link.js +1 -1
- package/components/Link/sgds-link.d.ts +7 -1
- package/components/Link/sgds-link.js +28 -2
- package/components/Link/sgds-link.js.map +1 -1
- package/components/Mainnav/index.umd.min.js +1 -1
- package/components/Modal/index.umd.min.js +4 -4
- package/components/Modal/index.umd.min.js.map +1 -1
- package/components/Modal/sgds-modal.d.ts +1 -1
- package/components/Modal/sgds-modal.js +2 -2
- package/components/Modal/sgds-modal.js.map +1 -1
- package/components/Pagination/index.umd.min.js +1 -1
- package/components/QuantityToggle/index.umd.min.js +1 -1
- package/components/QuantityToggle/index.umd.min.js.map +1 -1
- package/components/Subnav/index.umd.min.js +11 -9
- package/components/Subnav/index.umd.min.js.map +1 -1
- package/components/Subnav/sgds-subnav.d.ts +4 -0
- package/components/Subnav/sgds-subnav.js +18 -2
- package/components/Subnav/sgds-subnav.js.map +1 -1
- package/components/Subnav/subnav.js +1 -1
- package/components/SystemBanner/index.d.ts +6 -0
- package/components/SystemBanner/index.js +6 -0
- package/components/SystemBanner/index.js.map +1 -0
- package/components/SystemBanner/index.umd.min.js +2101 -0
- package/components/SystemBanner/index.umd.min.js.map +1 -0
- package/components/SystemBanner/sgds-system-banner-item.d.ts +24 -0
- package/components/SystemBanner/sgds-system-banner-item.js +93 -0
- package/components/SystemBanner/sgds-system-banner-item.js.map +1 -0
- package/components/SystemBanner/sgds-system-banner.d.ts +51 -0
- package/components/SystemBanner/sgds-system-banner.js +224 -0
- package/components/SystemBanner/sgds-system-banner.js.map +1 -0
- package/components/SystemBanner/system-banner-context.d.ts +3 -0
- package/components/SystemBanner/system-banner-context.js +6 -0
- package/components/SystemBanner/system-banner-context.js.map +1 -0
- package/components/SystemBanner/system-banner-item.js +6 -0
- package/components/SystemBanner/system-banner-item.js.map +1 -0
- package/components/SystemBanner/system-banner.js +6 -0
- package/components/SystemBanner/system-banner.js.map +1 -0
- package/components/Toast/index.umd.min.js +12 -12
- package/components/Toast/index.umd.min.js.map +1 -1
- package/components/Toast/sgds-toast.d.ts +1 -1
- package/components/Toast/sgds-toast.js +2 -2
- package/components/Toast/sgds-toast.js.map +1 -1
- package/components/index.d.ts +2 -0
- package/components/index.js +2 -0
- package/components/index.js.map +1 -1
- package/components/index.umd.min.js +168 -136
- package/components/index.umd.min.js.map +1 -1
- package/css/fouc.css +3 -0
- package/index.d.ts +3 -1
- package/index.js +3 -1
- package/index.js.map +1 -1
- package/index.umd.min.js +212 -161
- package/index.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/react/base/button.cjs.js +1 -1
- package/react/base/button.js +1 -1
- package/react/close-button/index.cjs.js +40 -0
- package/react/close-button/index.cjs.js.map +1 -0
- package/react/close-button/index.d.ts +2 -0
- package/react/close-button/index.js +16 -0
- package/react/close-button/index.js.map +1 -0
- package/react/components/Alert/sgds-alert.cjs.js +2 -2
- package/react/components/Alert/sgds-alert.cjs.js.map +1 -1
- package/react/components/Alert/sgds-alert.js +2 -2
- package/react/components/Alert/sgds-alert.js.map +1 -1
- package/react/components/Badge/sgds-badge.cjs.js +2 -2
- package/react/components/Badge/sgds-badge.cjs.js.map +1 -1
- package/react/components/Badge/sgds-badge.js +2 -2
- package/react/components/Badge/sgds-badge.js.map +1 -1
- package/react/components/Breadcrumb/sgds-breadcrumb-item.cjs.js +5 -2
- package/react/components/Breadcrumb/sgds-breadcrumb-item.cjs.js.map +1 -1
- package/react/components/Breadcrumb/sgds-breadcrumb-item.js +5 -2
- package/react/components/Breadcrumb/sgds-breadcrumb-item.js.map +1 -1
- package/react/components/Card/sgds-card.cjs.js.map +1 -1
- package/react/components/Card/sgds-card.js.map +1 -1
- package/react/components/CloseButton/close-button.cjs.js +11 -0
- package/react/components/CloseButton/close-button.js +7 -0
- package/react/{internals → components}/CloseButton/sgds-close-button.cjs.js +4 -10
- package/react/components/CloseButton/sgds-close-button.cjs.js.map +1 -0
- package/react/{internals → components}/CloseButton/sgds-close-button.js +4 -10
- package/react/components/CloseButton/sgds-close-button.js.map +1 -0
- package/react/components/Drawer/sgds-drawer.cjs.js +1 -1
- package/react/components/Drawer/sgds-drawer.cjs.js.map +1 -1
- package/react/components/Drawer/sgds-drawer.js +1 -1
- package/react/components/Drawer/sgds-drawer.js.map +1 -1
- package/react/components/FileUpload/sgds-file-upload.cjs.js +1 -1
- package/react/components/FileUpload/sgds-file-upload.cjs.js.map +1 -1
- package/react/components/FileUpload/sgds-file-upload.js +1 -1
- package/react/components/FileUpload/sgds-file-upload.js.map +1 -1
- package/react/components/Footer/footer-item.cjs.js +1 -1
- package/react/components/Footer/footer-item.js +1 -1
- package/react/components/Footer/footer.cjs.js +1 -1
- package/react/components/Footer/footer.js +1 -1
- package/react/components/Footer/sgds-footer-item.cjs.js +11 -1
- package/react/components/Footer/sgds-footer-item.cjs.js.map +1 -1
- package/react/components/Footer/sgds-footer-item.js +11 -1
- package/react/components/Footer/sgds-footer-item.js.map +1 -1
- package/react/components/Footer/sgds-footer.cjs.js +7 -7
- package/react/components/Footer/sgds-footer.cjs.js.map +1 -1
- package/react/components/Footer/sgds-footer.js +7 -7
- package/react/components/Footer/sgds-footer.js.map +1 -1
- package/react/components/IconCard/sgds-icon-card.cjs.js.map +1 -1
- package/react/components/IconCard/sgds-icon-card.js.map +1 -1
- package/react/components/ImageCard/sgds-image-card.cjs.js.map +1 -1
- package/react/components/ImageCard/sgds-image-card.js.map +1 -1
- package/react/components/Input/sgds-input.cjs.js.map +1 -1
- package/react/components/Input/sgds-input.js.map +1 -1
- package/react/components/Link/link.cjs.js +1 -1
- package/react/components/Link/link.js +1 -1
- package/react/components/Link/sgds-link.cjs.js +28 -2
- package/react/components/Link/sgds-link.cjs.js.map +1 -1
- package/react/components/Link/sgds-link.js +28 -2
- package/react/components/Link/sgds-link.js.map +1 -1
- package/react/components/Modal/sgds-modal.cjs.js +2 -2
- package/react/components/Modal/sgds-modal.cjs.js.map +1 -1
- package/react/components/Modal/sgds-modal.js +2 -2
- package/react/components/Modal/sgds-modal.js.map +1 -1
- package/react/components/Subnav/sgds-subnav.cjs.js +17 -1
- package/react/components/Subnav/sgds-subnav.cjs.js.map +1 -1
- package/react/components/Subnav/sgds-subnav.js +18 -2
- package/react/components/Subnav/sgds-subnav.js.map +1 -1
- package/react/components/Subnav/subnav.cjs.js +1 -1
- package/react/components/Subnav/subnav.js +1 -1
- package/react/components/SystemBanner/sgds-system-banner-item.cjs.js +99 -0
- package/react/components/SystemBanner/sgds-system-banner-item.cjs.js.map +1 -0
- package/react/components/SystemBanner/sgds-system-banner-item.js +94 -0
- package/react/components/SystemBanner/sgds-system-banner-item.js.map +1 -0
- package/react/components/SystemBanner/sgds-system-banner.cjs.js +230 -0
- package/react/components/SystemBanner/sgds-system-banner.cjs.js.map +1 -0
- package/react/components/SystemBanner/sgds-system-banner.js +225 -0
- package/react/components/SystemBanner/sgds-system-banner.js.map +1 -0
- package/react/components/SystemBanner/system-banner-context.cjs.js +11 -0
- package/react/components/SystemBanner/system-banner-context.cjs.js.map +1 -0
- package/react/components/SystemBanner/system-banner-context.js +7 -0
- package/react/components/SystemBanner/system-banner-context.js.map +1 -0
- package/react/components/SystemBanner/system-banner-item.cjs.js +11 -0
- package/react/components/SystemBanner/system-banner-item.cjs.js.map +1 -0
- package/react/components/SystemBanner/system-banner-item.js +7 -0
- package/react/components/SystemBanner/system-banner-item.js.map +1 -0
- package/react/components/SystemBanner/system-banner.cjs.js +11 -0
- package/react/components/SystemBanner/system-banner.cjs.js.map +1 -0
- package/react/components/SystemBanner/system-banner.js +7 -0
- package/react/components/SystemBanner/system-banner.js.map +1 -0
- package/react/components/Toast/sgds-toast.cjs.js +2 -2
- package/react/components/Toast/sgds-toast.cjs.js.map +1 -1
- package/react/components/Toast/sgds-toast.js +2 -2
- package/react/components/Toast/sgds-toast.js.map +1 -1
- package/react/index.cjs.js +114 -108
- package/react/index.cjs.js.map +1 -1
- package/react/index.d.ts +3 -0
- package/react/index.js +3 -0
- package/react/index.js.map +1 -1
- package/react/system-banner/index.cjs.js +43 -0
- package/react/system-banner/index.cjs.js.map +1 -0
- package/react/system-banner/index.d.ts +2 -0
- package/react/system-banner/index.js +19 -0
- package/react/system-banner/index.js.map +1 -0
- package/react/system-banner-item/index.cjs.js +42 -0
- package/react/system-banner-item/index.cjs.js.map +1 -0
- package/react/system-banner-item/index.d.ts +2 -0
- package/react/system-banner-item/index.js +18 -0
- package/react/system-banner-item/index.js.map +1 -0
- package/themes/root.css +14 -2
- package/internals/CloseButton/close-button.js +0 -6
- package/internals/CloseButton/sgds-close-button.js.map +0 -1
- package/react/internals/CloseButton/close-button.cjs.js +0 -11
- package/react/internals/CloseButton/close-button.js +0 -7
- package/react/internals/CloseButton/sgds-close-button.cjs.js.map +0 -1
- package/react/internals/CloseButton/sgds-close-button.js.map +0 -1
- package/utils/test.d.ts +0 -28
- /package/{internals → components}/CloseButton/close-button.js.map +0 -0
- /package/{internals → components}/CloseButton/index.d.ts +0 -0
- /package/react/{internals → components}/CloseButton/close-button.cjs.js.map +0 -0
- /package/react/{internals → components}/CloseButton/close-button.js.map +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-image-card.js","sources":["../../../src/components/ImageCard/sgds-image-card.ts"],"sourcesContent":["import { nothing, PropertyValueMap } from \"lit\";\nimport { html, literal } from \"lit/static-html.js\";\nimport { property, queryAssignedElements, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport { CardImageAdjustment, CardImagePosition } from \"../Card/types\";\nimport SgdsLink from \"../Link/sgds-link\";\nimport imageCardStyle from \"./image-card.css\";\n\n/**\n * @summary Image cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.\n * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.\n * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot image-badge - Accepts an element for a badge, positioned at the top-left corner of the image.\n * @slot image-action - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the image. Typically used for action menu.\n * @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.\n * @slot subtitle - The subtitle of the card\n * @slot title - The title of the card\n * @slot description - The paragrapher text of the card\n * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.\n * @slot footer - Footer area of the card. Accepts links, actions, or any custom content.\n * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.\n * Legacy slot for anchor elements. Use `footer` instead.\n */\nexport class SgdsImageCard extends CardElement {\n static styles = [...CardElement.styles, imageCardStyle];\n\n /** @internal */\n @queryAssignedNodes({ slot: \"image\", flatten: true })\n _imageNode!: Array<Node>;\n @queryAssignedElements({ slot: \"footer\" })\n private footerNode!: HTMLElement[];\n @queryAssignedElements({ slot: \"link\" })\n private linkNode!: HTMLAnchorElement[] | SgdsLink[];\n\n /** Removes the card's internal padding when set to true. */\n @property({ type: Boolean, reflect: true }) noPadding = false;\n\n /** Sets the image position of the card. Available options: `before`, `after` */\n @property({ type: String, reflect: true }) imagePosition: CardImagePosition = \"before\";\n\n /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */\n @property({ type: String, reflect: true }) imageAdjustment: CardImageAdjustment = \"default\";\n\n private get linkSlotItems(): HTMLAnchorElement | null {\n if (!this.linkNode || this.linkNode.length === 0) return null;\n const element = this.linkNode[0] as HTMLElement;\n return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n }\n\n private get footerSlotItems(): HTMLAnchorElement | null {\n if (!this.footerNode || this.footerNode.length === 0) return null;\n const element = this.footerNode[0] as HTMLElement;\n return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n }\n\n protected firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n if (this._imageNode.length === 0) {\n const image = this.shadowRoot.querySelector(\".card-image\") as HTMLDivElement;\n const body = this.shadowRoot.querySelector(\".card-body\") as HTMLDivElement;\n image.style.display = \"none\";\n if (this.noPadding) body.style.padding = \"0px\";\n }\n\n if (this.stretchedLink) {\n const footerHref = this.footerSlotItems?.href;\n const linkHref = this.linkSlotItems?.href;\n\n if (footerHref) {\n this.card.setAttribute(\"href\", footerHref);\n } else if (linkHref) {\n this.card.setAttribute(\"href\", linkHref);\n }\n }\n }\n\n handleImgSlotChange(e: Event) {\n const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n\n if (childNodes.length > 1) {\n return console.error(\"Multiple elements passed into SgdsCard's image slot\");\n }\n }\n\n render() {\n const tag = this.stretchedLink ? literal`a` : literal`div`;\n const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n\n return html`\n <${tag} \n class=\"card ${classMap({\n disabled: this.disabled\n })}\"\n tabindex=${cardTabIndex}\n >\n ${this.tinted && !this.noPadding ? html`<div class=\"card-tinted-bg\"></div>` : nothing}\n <div class=\"card-image\">\n\t\t\t\t\t<slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n\t\t\t\t\t<slot name=\"image-badge\"></slot>\n\t\t\t\t\t<slot name=\"image-action\"></slot>\n </div>\n <div class=\"card-body\">\n\t\t\t\t\t<slot name=\"upper\"></slot>\n <div class=\"card-header-container\">\n <div class=\"card-header\">\n <slot name=\"subtitle\"></slot>\n <h3 class=\"card-title\"><slot name=\"title\" @slotchange=${this.handleTitleSlotChange}></slot></h3>\n </div>\n <slot></slot>\n </div>\n <slot name=\"description\"></slot>\n <slot name=\"lower\"></slot>\n <slot name=\"footer\">\n <slot name=\"link\" @slotchange=${this.warnLinkSlotMisused}></slot>\n </slot>\n </div>\n </${tag}>\n `;\n }\n}\n\nexport default SgdsImageCard;\n"],"names":["imageCardStyle"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sgds-image-card.js","sources":["../../../src/components/ImageCard/sgds-image-card.ts"],"sourcesContent":["import { nothing, PropertyValueMap } from \"lit\";\nimport { html, literal } from \"lit/static-html.js\";\nimport { property, queryAssignedElements, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport { CardImageAdjustment, CardImagePosition } from \"../Card/types\";\nimport type SgdsLink from \"../Link/sgds-link\";\nimport imageCardStyle from \"./image-card.css\";\n\n/**\n * @summary Image cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.\n * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.\n * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot image-badge - Accepts an element for a badge, positioned at the top-left corner of the image.\n * @slot image-action - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the image. Typically used for action menu.\n * @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.\n * @slot subtitle - The subtitle of the card\n * @slot title - The title of the card\n * @slot description - The paragrapher text of the card\n * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.\n * @slot footer - Footer area of the card. Accepts links, actions, or any custom content.\n * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.\n * Legacy slot for anchor elements. Use `footer` instead.\n */\nexport class SgdsImageCard extends CardElement {\n static styles = [...CardElement.styles, imageCardStyle];\n\n /** @internal */\n @queryAssignedNodes({ slot: \"image\", flatten: true })\n _imageNode!: Array<Node>;\n @queryAssignedElements({ slot: \"footer\" })\n private footerNode!: HTMLElement[];\n @queryAssignedElements({ slot: \"link\" })\n private linkNode!: HTMLAnchorElement[] | SgdsLink[];\n\n /** Removes the card's internal padding when set to true. */\n @property({ type: Boolean, reflect: true }) noPadding = false;\n\n /** Sets the image position of the card. Available options: `before`, `after` */\n @property({ type: String, reflect: true }) imagePosition: CardImagePosition = \"before\";\n\n /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */\n @property({ type: String, reflect: true }) imageAdjustment: CardImageAdjustment = \"default\";\n\n private get linkSlotItems(): HTMLAnchorElement | null {\n if (!this.linkNode || this.linkNode.length === 0) return null;\n const element = this.linkNode[0] as HTMLElement;\n return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n }\n\n private get footerSlotItems(): HTMLAnchorElement | null {\n if (!this.footerNode || this.footerNode.length === 0) return null;\n const element = this.footerNode[0] as HTMLElement;\n return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n }\n\n protected firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n if (this._imageNode.length === 0) {\n const image = this.shadowRoot.querySelector(\".card-image\") as HTMLDivElement;\n const body = this.shadowRoot.querySelector(\".card-body\") as HTMLDivElement;\n image.style.display = \"none\";\n if (this.noPadding) body.style.padding = \"0px\";\n }\n\n if (this.stretchedLink) {\n const footerHref = this.footerSlotItems?.href;\n const linkHref = this.linkSlotItems?.href;\n\n if (footerHref) {\n this.card.setAttribute(\"href\", footerHref);\n } else if (linkHref) {\n this.card.setAttribute(\"href\", linkHref);\n }\n }\n }\n\n handleImgSlotChange(e: Event) {\n const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n\n if (childNodes.length > 1) {\n return console.error(\"Multiple elements passed into SgdsCard's image slot\");\n }\n }\n\n render() {\n const tag = this.stretchedLink ? literal`a` : literal`div`;\n const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n\n return html`\n <${tag} \n class=\"card ${classMap({\n disabled: this.disabled\n })}\"\n tabindex=${cardTabIndex}\n >\n ${this.tinted && !this.noPadding ? html`<div class=\"card-tinted-bg\"></div>` : nothing}\n <div class=\"card-image\">\n\t\t\t\t\t<slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n\t\t\t\t\t<slot name=\"image-badge\"></slot>\n\t\t\t\t\t<slot name=\"image-action\"></slot>\n </div>\n <div class=\"card-body\">\n\t\t\t\t\t<slot name=\"upper\"></slot>\n <div class=\"card-header-container\">\n <div class=\"card-header\">\n <slot name=\"subtitle\"></slot>\n <h3 class=\"card-title\"><slot name=\"title\" @slotchange=${this.handleTitleSlotChange}></slot></h3>\n </div>\n <slot></slot>\n </div>\n <slot name=\"description\"></slot>\n <slot name=\"lower\"></slot>\n <slot name=\"footer\">\n <slot name=\"link\" @slotchange=${this.warnLinkSlotMisused}></slot>\n </slot>\n </div>\n </${tag}>\n `;\n }\n}\n\nexport default SgdsImageCard;\n"],"names":["imageCardStyle"],"mappings":"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"}
|