@telesign/boreal-web-components 0.1.0-alpha.0 → 0.1.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +202 -0
- package/components-build/bds-typography.js +1 -1
- package/custom-elements.json +0 -92
- package/dist/boreal-web-components/boreal-web-components.esm.js +1 -1
- package/dist/boreal-web-components/{p-527a761b.entry.js → p-69d89caa.entry.js} +1 -1
- package/dist/boreal-web-components/p-CMd-Mv-5.system.js +1 -1
- package/dist/boreal-web-components/{p-5666a22a.system.entry.js → p-c3c558d2.system.entry.js} +1 -1
- package/dist/cjs/bds-typography.cjs.entry.js +1 -1
- package/dist/cjs/boreal-web-components.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +0 -1
- package/dist/collection/components/titles-text/bds-typography/bds-typography.js +1 -1
- package/dist/esm/bds-typography.entry.js +1 -1
- package/dist/esm/boreal-web-components.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm-es5/bds-typography.entry.js +1 -1
- package/dist/esm-es5/boreal-web-components.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/types/components.d.ts +0 -48
- package/package.json +1 -1
- package/components-build/my-component.d.ts +0 -11
- package/components-build/my-component.js +0 -1
- package/dist/boreal-web-components/p-412d037b.system.entry.js +0 -1
- package/dist/boreal-web-components/p-b818618b.entry.js +0 -1
- package/dist/cjs/my-component.cjs.entry.js +0 -29
- package/dist/collection/components/my-component/my-component.css +0 -3
- package/dist/collection/components/my-component/my-component.js +0 -95
- package/dist/esm/my-component.entry.js +0 -27
- package/dist/esm-es5/my-component.entry.js +0 -1
- package/dist/types/components/my-component/my-component.d.ts +0 -16
- package/readme.md +0 -111
package/README.md
ADDED
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
# @telesign/boreal-web-components
|
|
2
|
+
|
|
3
|
+
> Framework-agnostic Web Components for the Boreal Design System — built with Stencil, themed with CSS custom properties.
|
|
4
|
+
|
|
5
|
+
[](https://stenciljs.com)
|
|
6
|
+
[](../../LICENSE)
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## Overview
|
|
11
|
+
|
|
12
|
+
`@telesign/boreal-web-components` is the core component library of the Boreal Design System. It is built with [Stencil](https://stenciljs.com/), a compile-time tool that generates standards-based [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) — web components that run in any browser and integrate with any framework (or no framework at all).
|
|
13
|
+
|
|
14
|
+
All visual styles are driven by CSS custom properties (design tokens), enabling multi-brand theming across Proximus, Connect, Engage, and Protect.
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
## Installation
|
|
19
|
+
|
|
20
|
+
```sh
|
|
21
|
+
npm install @telesign/boreal-web-components
|
|
22
|
+
# or
|
|
23
|
+
pnpm add @telesign/boreal-web-components
|
|
24
|
+
# or
|
|
25
|
+
yarn add @telesign/boreal-web-components
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## Setup
|
|
31
|
+
|
|
32
|
+
### Styles
|
|
33
|
+
|
|
34
|
+
Import the Boreal DS stylesheet in your application entry file:
|
|
35
|
+
|
|
36
|
+
```ts
|
|
37
|
+
import '@telesign/boreal-web-components/dist/boreal-web-components/boreal-web-components.css';
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Icon font
|
|
41
|
+
|
|
42
|
+
Add the Boreal DS icon font to the `<head>` of your `index.html`:
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<link
|
|
46
|
+
rel="stylesheet"
|
|
47
|
+
href="https://resources-borealds.s3.us-east-1.amazonaws.com/icons/current/boreal-styles.css"
|
|
48
|
+
/>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Theming
|
|
52
|
+
|
|
53
|
+
Set the `data-theme` attribute on the `<body>` element to activate a brand theme:
|
|
54
|
+
|
|
55
|
+
```html
|
|
56
|
+
<body data-theme="proximus">
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Available values: `connect` | `engage` | `protect` | `proximus`
|
|
60
|
+
|
|
61
|
+
Each theme maps to a set of CSS custom properties (design tokens) that control color, typography, spacing, and shape across all components. Changing the attribute at runtime switches the active theme instantly.
|
|
62
|
+
|
|
63
|
+
---
|
|
64
|
+
|
|
65
|
+
## Usage
|
|
66
|
+
|
|
67
|
+
### Vanilla HTML
|
|
68
|
+
|
|
69
|
+
Load the ESM bundle and stylesheet directly from the package:
|
|
70
|
+
|
|
71
|
+
```html
|
|
72
|
+
<html>
|
|
73
|
+
<head>
|
|
74
|
+
<link
|
|
75
|
+
rel="stylesheet"
|
|
76
|
+
href="node_modules/@telesign/boreal-web-components/dist/boreal-web-components/boreal-web-components.css"
|
|
77
|
+
/>
|
|
78
|
+
<script
|
|
79
|
+
type="module"
|
|
80
|
+
src="node_modules/@telesign/boreal-web-components/dist/boreal-web-components/boreal-web-components.esm.js"
|
|
81
|
+
></script>
|
|
82
|
+
</head>
|
|
83
|
+
<body data-theme="proximus">
|
|
84
|
+
<bds-banner variant="info">Welcome to Boreal DS</bds-banner>
|
|
85
|
+
</body>
|
|
86
|
+
</html>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### Lazy Loading
|
|
90
|
+
|
|
91
|
+
If your project uses a bundler, register all components via the loader and let them load on demand:
|
|
92
|
+
|
|
93
|
+
```ts
|
|
94
|
+
import { defineCustomElements } from '@telesign/boreal-web-components/loader';
|
|
95
|
+
|
|
96
|
+
defineCustomElements();
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### Standalone (tree-shakeable)
|
|
100
|
+
|
|
101
|
+
Import individual components directly to keep bundle sizes small:
|
|
102
|
+
|
|
103
|
+
```ts
|
|
104
|
+
import '@telesign/boreal-web-components/components/bds-banner';
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
---
|
|
108
|
+
|
|
109
|
+
## Framework Wrappers
|
|
110
|
+
|
|
111
|
+
For React and Vue applications, framework-specific wrappers provide typed props, event bindings, and (for Vue) `v-model` support out of the box.
|
|
112
|
+
|
|
113
|
+
| Package | Description | Docs |
|
|
114
|
+
| --- | --- | --- |
|
|
115
|
+
| [`@telesign/boreal-react`](https://www.npmjs.com/package/@telesign/boreal-react) | React wrapper | [README](../boreal-react/README.md) |
|
|
116
|
+
| [`@telesign/boreal-vue`](https://www.npmjs.com/package/@telesign/boreal-vue) | Vue 3 wrapper | [README](../boreal-vue/README.md) |
|
|
117
|
+
|
|
118
|
+
> [!NOTE]
|
|
119
|
+
> Both wrapper packages list `@telesign/boreal-web-components` as a dependency and install it automatically. You do not need to install it separately when using a wrapper.
|
|
120
|
+
|
|
121
|
+
---
|
|
122
|
+
|
|
123
|
+
## Events
|
|
124
|
+
|
|
125
|
+
Boreal DS components emit custom DOM events for interactive behaviour. All custom events are prefixed with `bds` followed by the action name — for example `bdsClose`, `bdsChange`, `bdsClick`.
|
|
126
|
+
|
|
127
|
+
This prefix prevents collisions with native browser events and third-party libraries.
|
|
128
|
+
|
|
129
|
+
```html
|
|
130
|
+
<bds-banner variant="info" enable-close>Something happened</bds-banner>
|
|
131
|
+
|
|
132
|
+
<script>
|
|
133
|
+
const banner = document.querySelector('bds-banner');
|
|
134
|
+
banner.addEventListener('bdsClose', (event) => {
|
|
135
|
+
console.log('Banner dismissed', event.detail);
|
|
136
|
+
});
|
|
137
|
+
</script>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
---
|
|
141
|
+
|
|
142
|
+
## Development
|
|
143
|
+
|
|
144
|
+
### Prerequisites
|
|
145
|
+
|
|
146
|
+
This project uses [fnm](https://github.com/Schniz/fnm) to manage Node.js versions. Before running any commands, activate the correct version:
|
|
147
|
+
|
|
148
|
+
```sh
|
|
149
|
+
fnm use
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
You will also need [pnpm](https://pnpm.io/) as the package manager.
|
|
153
|
+
|
|
154
|
+
### Local setup
|
|
155
|
+
|
|
156
|
+
```sh
|
|
157
|
+
# Clone the monorepo and move into this package
|
|
158
|
+
git clone <repo-url> boreal-ds
|
|
159
|
+
cd boreal-ds
|
|
160
|
+
|
|
161
|
+
# Activate the correct Node version
|
|
162
|
+
fnm use
|
|
163
|
+
|
|
164
|
+
# Install all workspace dependencies from the monorepo root
|
|
165
|
+
pnpm install
|
|
166
|
+
|
|
167
|
+
# Build the web-components package
|
|
168
|
+
pnpm --filter @telesign/boreal-web-components build
|
|
169
|
+
|
|
170
|
+
# Start the Stencil dev server with file watching
|
|
171
|
+
pnpm --filter @telesign/boreal-web-components dev
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
### Generate a component
|
|
175
|
+
|
|
176
|
+
Stencil includes a generator that scaffolds the component structure interactively:
|
|
177
|
+
|
|
178
|
+
```sh
|
|
179
|
+
pnpm --filter @telesign/boreal-web-components generate
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
### Available scripts
|
|
183
|
+
|
|
184
|
+
| Script | Description |
|
|
185
|
+
| --- | --- |
|
|
186
|
+
| `build` | Production build via Stencil |
|
|
187
|
+
| `dev` | Dev build with watch + local server |
|
|
188
|
+
| `test` | Run unit tests (Jest + spec) |
|
|
189
|
+
| `e2e` | Run end-to-end tests (Puppeteer) |
|
|
190
|
+
| `generate` | Scaffold a new component interactively |
|
|
191
|
+
|
|
192
|
+
---
|
|
193
|
+
|
|
194
|
+
## Contributing
|
|
195
|
+
|
|
196
|
+
Please read the [Contributing Guidelines](../../CONTRIBUTING.md) at the monorepo root before submitting issues or pull requests.
|
|
197
|
+
|
|
198
|
+
---
|
|
199
|
+
|
|
200
|
+
## License
|
|
201
|
+
|
|
202
|
+
MIT
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as e,h as a,a as r,t as i}from"./index.js";import{a as o,i as l}from"./p-B9wshZ_4.js";const s="md",h={link:{states:[o.DISABLED],size:["sm",s]},label:{states:[o.DISABLED],isRequired:!0,canUseTooltip:!0},heading:{canUseTooltip:!0},subheading:{canUseTooltip:!0},helper:{states:[o.ERROR]},display:{size:["xs","sm",s,"lg","xl"]}},p=(t,e)=>({a:{href:t.state!==o.DISABLED?t.sanitizedHref:null,target:t.target,download:t.isDownloadable?t.filename:null,rel:"_blank"===t.target?"noopener noreferrer":void 0},label:{htmlFor:t.htmlFor}}[e]||{}),y=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.inheritedAttributes={},this.variant="display",this.size=s,this.state=o.DEFAULT,this.customClass="",this.element="p",this.align="start",this.ellipsis=!1,this.maxLines=1,this.tooltipText="",this.isRequired=!1,this.htmlFor=void 0,this.href=null,this.target=null,this.isDownloadable=!1,this.filename="download",this.sanitizedHref=""}async updateSanitizedHref(){if("a"===this.getTagName&&null!==this.href){const{sanitizeUrl:t}=await import("./p-noyWJ11s.js").then((function(t){return t.i}));this.sanitizedHref=t(this.href)}else this.sanitizedHref=""}async componentWillLoad(){"a"===this.getTagName&&null!==this.href&&await this.updateSanitizedHref(),this.inheritedAttributes={...l(this.el)}}get getTagName(){return"link"===this.variant?"a":this.element.toLowerCase()}getVariantConfig(){return h[this.variant]??{}}getAccessibilityTags(){const{isRequired:t=null}=this.getVariantConfig();return{"aria-required":this.isRequired&&t,"aria-disabled":this.state===o.DISABLED&&["a","label"].includes(this.getTagName)}}getVariantStateStyles(){const t=this.getVariantConfig();return{["bds-typography--"+this.variant]:!0,["bds-typography--align-"+this.align]:!0,["bds-typography--"+this.state]:!(!t?.states||!t?.states.includes(this.state)),["bds-typography--size-"+this.size]:!(!t?.size||!t?.size.includes(this.size)),"bds-typography--required":!(!t?.isRequired||!this.isRequired),"bds-typography--ellipsis":this.ellipsis&&this.maxLines<=1,"bds-typography--ellipsis-multiline":this.ellipsis&&this.maxLines>1,[this.customClass]:""!==this.customClass}}render(){const t=this.getTagName,e={...p(this,t),...this.inheritedAttributes,...this.getAccessibilityTags()},i=this.getVariantStateStyles(),{canUseTooltip:o=null,isRequired:l=null}=this.getVariantConfig();return a(r,{key:"
|
|
1
|
+
import{p as t,H as e,h as a,a as r,t as i}from"./index.js";import{a as o,i as l}from"./p-B9wshZ_4.js";const s="md",h={link:{states:[o.DISABLED],size:["sm",s]},label:{states:[o.DISABLED],isRequired:!0,canUseTooltip:!0},heading:{canUseTooltip:!0},subheading:{canUseTooltip:!0},helper:{states:[o.ERROR]},display:{size:["xs","sm",s,"lg","xl"]}},p=(t,e)=>({a:{href:t.state!==o.DISABLED?t.sanitizedHref:null,target:t.target,download:t.isDownloadable?t.filename:null,rel:"_blank"===t.target?"noopener noreferrer":void 0},label:{htmlFor:t.htmlFor}}[e]||{}),y=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.inheritedAttributes={},this.variant="display",this.size=s,this.state=o.DEFAULT,this.customClass="",this.element="p",this.align="start",this.ellipsis=!1,this.maxLines=1,this.tooltipText="",this.isRequired=!1,this.htmlFor=void 0,this.href=null,this.target=null,this.isDownloadable=!1,this.filename="download",this.sanitizedHref=""}async updateSanitizedHref(){if("a"===this.getTagName&&null!==this.href){const{sanitizeUrl:t}=await import("./p-noyWJ11s.js").then((function(t){return t.i}));this.sanitizedHref=t(this.href)}else this.sanitizedHref=""}async componentWillLoad(){"a"===this.getTagName&&null!==this.href&&await this.updateSanitizedHref(),this.inheritedAttributes={...l(this.el)}}get getTagName(){return"link"===this.variant?"a":this.element.toLowerCase()}getVariantConfig(){return h[this.variant]??{}}getAccessibilityTags(){const{isRequired:t=null}=this.getVariantConfig();return{"aria-required":this.isRequired&&t,"aria-disabled":this.state===o.DISABLED&&["a","label"].includes(this.getTagName)}}getVariantStateStyles(){const t=this.getVariantConfig();return{["bds-typography--"+this.variant]:!0,["bds-typography--align-"+this.align]:!0,["bds-typography--"+this.state]:!(!t?.states||!t?.states.includes(this.state)),["bds-typography--size-"+this.size]:!(!t?.size||!t?.size.includes(this.size)),"bds-typography--required":!(!t?.isRequired||!this.isRequired),"bds-typography--ellipsis":this.ellipsis&&this.maxLines<=1,"bds-typography--ellipsis-multiline":this.ellipsis&&this.maxLines>1,[this.customClass]:""!==this.customClass}}render(){const t=this.getTagName,e={...p(this,t),...this.inheritedAttributes,...this.getAccessibilityTags()},i=this.getVariantStateStyles(),{canUseTooltip:o=null,isRequired:l=null}=this.getVariantConfig();return a(r,{key:"e816237127a0bec2f223c3c11c405830b3bc530f",class:"bds-typography"},a(t,{key:"5428ad8d55990feae5190e19c6372445f76d504b",class:i,style:{webkitLineClamp:this.maxLines},...e},a("slot",{key:"5f5b95afd7799c988607174d45dfdffe018438a8"}),this.isRequired&&l&&a("em",{key:"5d57fc3a0aed14887df9fb03f2b279204e99861c",class:"bds-typography__required-indicator","aria-hidden":"true"},"*"),this.tooltipText&&o&&a("em",{key:"9b89f3e48de66ebcd27755d9ec19ef261b73250e",class:"bds-typography__info-icon bds-icon-info-circle"})))}get el(){return this}static get watchers(){return{href:[{updateSanitizedHref:0}]}}static get style(){return".bds-typography{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:var(--boreal-typography-font-family-primary);font-weight:var(--boreal-typography-font-weight-regular)}.bds-typography__required-indicator{color:var(--boreal-icon-danger-base);font-weight:var(--boreal-typography-font-weight-regular)}.bds-typography__info-icon{color:var(--boreal-icon-default-light)}.bds-typography--heading,.bds-typography--subheading{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-3xs)}.bds-typography--label{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-3xs)}.bds-typography--display{display:block}.bds-typography--caption,.bds-typography--helper,.bds-typography--link{display:inline-block}.bds-typography--caption{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-default-light)}.bds-typography--helper{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-sm);color:var(--boreal-text-default-light)}.bds-typography--link{font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-primary-base);text-decoration:none}.bds-typography--link:hover{text-decoration:underline}.bds-typography--link:visited{color:var(--boreal-text-primary-base)}.bds-typography--link:active{color:var(--boreal-text-primary-dark)}.bds-typography--link.bds-typography--size-sm{font-size:var(--boreal-typography-font-size-xs)}.bds-typography--link.bds-typography--size-md{font-size:var(--boreal-typography-font-size-sm)}.bds-typography--code{font-family:var(--boreal-typography-font-family-secondary);font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default);line-height:var(--boreal-typography-line-height-md);overflow-wrap:break-word;background-color:var(--boreal-bg-neutral);padding:var(--boreal-spacing-3xs) var(--boreal-spacing-xs);border-radius:var(--boreal-radius-xs);display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone}.bds-typography--label{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-default-darker)}.bds-typography--display{font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default)}.bds-typography--display.bds-typography--size-sm{font-size:var(--boreal-typography-font-size-xl);line-height:var(--boreal-typography-line-height-xl)}.bds-typography--display.bds-typography--size-md{font-size:var(--boreal-typography-font-size-2xl);line-height:var(--boreal-typography-line-height-2xl)}.bds-typography--display.bds-typography--size-lg{font-size:var(--boreal-typography-font-size-3xl);line-height:var(--boreal-typography-line-height-3xl);font-weight:var(--boreal-typography-font-weight-light)}.bds-typography--display.bds-typography--size-xl{font-size:var(--boreal-typography-font-size-4xl);line-height:var(--boreal-typography-line-height-4xl);font-weight:var(--boreal-typography-font-weight-light)}.bds-typography--heading{font-size:var(--boreal-typography-font-size-lg);line-height:var(--boreal-typography-line-height-lg);font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default)}.bds-typography h1.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-4xl);line-height:var(--boreal-typography-line-height-4xl)}.bds-typography h2.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-3xl);line-height:var(--boreal-typography-line-height-3xl)}.bds-typography h3.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-2xl);line-height:var(--boreal-typography-line-height-2xl)}.bds-typography h4.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-xl);line-height:var(--boreal-typography-line-height-xl)}.bds-typography h5.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-lg);line-height:var(--boreal-typography-line-height-lg)}.bds-typography h6.bds-typography--heading{font-size:var(--boreal-typography-font-size-md);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md)}.bds-typography--subheading{font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md);font-weight:var(--boreal-typography-font-weight-semibold)}.bds-typography--align-start{text-align:start}.bds-typography--align-center{text-align:center}.bds-typography--align-end{text-align:end}.bds-typography--align-inherit{text-align:inherit}.bds-typography--error{color:var(--boreal-text-danger-base)}.bds-typography--disabled{color:var(--boreal-text-disabled);pointer-events:none;cursor:not-allowed}.bds-typography--disabled .bds-typography__required-indicator{color:var(--boreal-text-danger-light)}.bds-typography--ellipsis{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.bds-typography--ellipsis-multiline{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;width:100%}"}},[260,"bds-typography",{variant:[513],size:[513],state:[513],customClass:[1,"custom-class"],element:[1],align:[1],ellipsis:[4],maxLines:[2,"max-lines"],tooltipText:[1,"tooltip-text"],isRequired:[516,"is-required"],htmlFor:[1,"html-for"],href:[1],target:[1],isDownloadable:[4,"is-downloadable"],filename:[1],sanitizedHref:[32]},void 0,{href:[{updateSanitizedHref:0}]}]),n=y,g=function(){"undefined"!=typeof customElements&&["bds-typography"].forEach((t=>{"bds-typography"===t&&(customElements.get(i(t))||customElements.define(i(t),y))}))};export{n as BdsTypography,g as defineCustomElement}
|
package/custom-elements.json
CHANGED
|
@@ -667,98 +667,6 @@
|
|
|
667
667
|
}
|
|
668
668
|
}
|
|
669
669
|
]
|
|
670
|
-
},
|
|
671
|
-
{
|
|
672
|
-
"kind": "javascript-module",
|
|
673
|
-
"path": "src/components/my-component/my-component.tsx",
|
|
674
|
-
"declarations": [
|
|
675
|
-
{
|
|
676
|
-
"kind": "class",
|
|
677
|
-
"customElement": true,
|
|
678
|
-
"tagName": "my-component",
|
|
679
|
-
"name": "MyComponent",
|
|
680
|
-
"attributes": [
|
|
681
|
-
{
|
|
682
|
-
"name": "first",
|
|
683
|
-
"description": "The first name",
|
|
684
|
-
"type": {
|
|
685
|
-
"text": "string"
|
|
686
|
-
},
|
|
687
|
-
"default": "''",
|
|
688
|
-
"fieldName": "first"
|
|
689
|
-
},
|
|
690
|
-
{
|
|
691
|
-
"name": "last",
|
|
692
|
-
"description": "The last name",
|
|
693
|
-
"type": {
|
|
694
|
-
"text": "string"
|
|
695
|
-
},
|
|
696
|
-
"default": "''",
|
|
697
|
-
"fieldName": "last"
|
|
698
|
-
},
|
|
699
|
-
{
|
|
700
|
-
"name": "middle",
|
|
701
|
-
"description": "The middle name",
|
|
702
|
-
"type": {
|
|
703
|
-
"text": "string"
|
|
704
|
-
},
|
|
705
|
-
"default": "''",
|
|
706
|
-
"fieldName": "middle"
|
|
707
|
-
}
|
|
708
|
-
],
|
|
709
|
-
"members": [
|
|
710
|
-
{
|
|
711
|
-
"kind": "field",
|
|
712
|
-
"name": "first",
|
|
713
|
-
"description": "The first name",
|
|
714
|
-
"type": {
|
|
715
|
-
"text": "string"
|
|
716
|
-
},
|
|
717
|
-
"default": "''",
|
|
718
|
-
"readonly": true,
|
|
719
|
-
"attribute": "first"
|
|
720
|
-
},
|
|
721
|
-
{
|
|
722
|
-
"kind": "field",
|
|
723
|
-
"name": "last",
|
|
724
|
-
"description": "The last name",
|
|
725
|
-
"type": {
|
|
726
|
-
"text": "string"
|
|
727
|
-
},
|
|
728
|
-
"default": "''",
|
|
729
|
-
"readonly": true,
|
|
730
|
-
"attribute": "last"
|
|
731
|
-
},
|
|
732
|
-
{
|
|
733
|
-
"kind": "field",
|
|
734
|
-
"name": "middle",
|
|
735
|
-
"description": "The middle name",
|
|
736
|
-
"type": {
|
|
737
|
-
"text": "string"
|
|
738
|
-
},
|
|
739
|
-
"default": "''",
|
|
740
|
-
"readonly": true,
|
|
741
|
-
"attribute": "middle"
|
|
742
|
-
}
|
|
743
|
-
]
|
|
744
|
-
}
|
|
745
|
-
],
|
|
746
|
-
"exports": [
|
|
747
|
-
{
|
|
748
|
-
"kind": "js",
|
|
749
|
-
"name": "MyComponent",
|
|
750
|
-
"declaration": {
|
|
751
|
-
"name": "MyComponent"
|
|
752
|
-
}
|
|
753
|
-
},
|
|
754
|
-
{
|
|
755
|
-
"kind": "custom-element-definition",
|
|
756
|
-
"name": "my-component",
|
|
757
|
-
"declaration": {
|
|
758
|
-
"name": "MyComponent"
|
|
759
|
-
}
|
|
760
|
-
}
|
|
761
|
-
]
|
|
762
670
|
}
|
|
763
671
|
]
|
|
764
672
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,b as i}from"./p-DgFiTd6X.js";export{s as setNonce}from"./p-DgFiTd6X.js";import{g as
|
|
1
|
+
import{p as e,H as t,b as i}from"./p-DgFiTd6X.js";export{s as setNonce}from"./p-DgFiTd6X.js";import{g as a}from"./p-DQuL1Twl.js";var n=e=>{const t=e.cloneNode;e.cloneNode=function(e){if("TEMPLATE"===this.nodeName)return t.call(this,e);const s=t.call(this,!1),i=this.childNodes;if(e)for(let e=0;e<i.length;e++)2!==i[e].nodeType&&s.appendChild(i[e].cloneNode(!0));return s}};(()=>{n(t.prototype);const s=import.meta.url,i={};return""!==s&&(i.resourcesUrl=new URL(".",s).href),e(i)})().then((async e=>(await a(),i([["p-d596406b",[[260,"bds-banner",{idComponent:[1,"id-component"],variant:[1],enableClose:[4,"enable-close"],isClosing:[32],isOpen:[32],closeBanner:[64]}]]],["p-69d89caa",[[260,"bds-typography",{variant:[513],size:[513],state:[513],customClass:[1,"custom-class"],element:[1],align:[1],ellipsis:[4],maxLines:[2,"max-lines"],tooltipText:[1,"tooltip-text"],isRequired:[516,"is-required"],htmlFor:[1,"html-for"],href:[1],target:[1],isDownloadable:[4,"is-downloadable"],filename:[1],sanitizedHref:[32]},null,{href:[{updateSanitizedHref:0}]}]]]],e))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,h as e,a,g as r}from"./p-DgFiTd6X.js";import{a as o,i}from"./p-B9wshZ_4.js";const h="md",l={link:{states:[o.DISABLED],size:["sm",h]},label:{states:[o.DISABLED],isRequired:!0,canUseTooltip:!0},heading:{canUseTooltip:!0},subheading:{canUseTooltip:!0},helper:{states:[o.ERROR]},display:{size:["xs","sm",h,"lg","xl"]}},s=class{constructor(e){t(this,e),this.inheritedAttributes={},this.variant="display",this.size=h,this.state=o.DEFAULT,this.customClass="",this.element="p",this.align="start",this.ellipsis=!1,this.maxLines=1,this.tooltipText="",this.isRequired=!1,this.htmlFor=void 0,this.href=null,this.target=null,this.isDownloadable=!1,this.filename="download",this.sanitizedHref=""}async updateSanitizedHref(){if("a"===this.getTagName&&null!==this.href){const{sanitizeUrl:t}=await import("./p-noyWJ11s.js").then((function(t){return t.i}));this.sanitizedHref=t(this.href)}else this.sanitizedHref=""}async componentWillLoad(){"a"===this.getTagName&&null!==this.href&&await this.updateSanitizedHref(),this.inheritedAttributes={...i(this.el)}}get getTagName(){return"link"===this.variant?"a":this.element.toLowerCase()}getVariantConfig(){return l[this.variant]??{}}getAccessibilityTags(){const{isRequired:t=null}=this.getVariantConfig(),e=["a","label"].includes(this.getTagName);return{"aria-required":this.isRequired&&t,"aria-disabled":this.state===o.DISABLED&&e}}getVariantStateStyles(){const t=this.getVariantConfig();return{[`bds-typography--${this.variant}`]:!0,[`bds-typography--align-${this.align}`]:!0,[`bds-typography--${this.state}`]:!(!t?.states||!t?.states.includes(this.state)),[`bds-typography--size-${this.size}`]:!(!t?.size||!t?.size.includes(this.size)),"bds-typography--required":!(!t?.isRequired||!this.isRequired),"bds-typography--ellipsis":this.ellipsis&&this.maxLines<=1,"bds-typography--ellipsis-multiline":this.ellipsis&&this.maxLines>1,[this.customClass]:""!==this.customClass}}render(){const t=this.getTagName,r={...(i=this,h=t,{a:{href:i.state!==o.DISABLED?i.sanitizedHref:null,target:i.target,download:i.isDownloadable?i.filename:null,rel:"_blank"===i.target?"noopener noreferrer":void 0},label:{htmlFor:i.htmlFor}}[h]||{}),...this.inheritedAttributes,...this.getAccessibilityTags()};var i,h;const l=this.getVariantStateStyles(),{canUseTooltip:s=null,isRequired:p=null}=this.getVariantConfig();return e(a,{key:"
|
|
1
|
+
import{r as t,h as e,a,g as r}from"./p-DgFiTd6X.js";import{a as o,i}from"./p-B9wshZ_4.js";const h="md",l={link:{states:[o.DISABLED],size:["sm",h]},label:{states:[o.DISABLED],isRequired:!0,canUseTooltip:!0},heading:{canUseTooltip:!0},subheading:{canUseTooltip:!0},helper:{states:[o.ERROR]},display:{size:["xs","sm",h,"lg","xl"]}},s=class{constructor(e){t(this,e),this.inheritedAttributes={},this.variant="display",this.size=h,this.state=o.DEFAULT,this.customClass="",this.element="p",this.align="start",this.ellipsis=!1,this.maxLines=1,this.tooltipText="",this.isRequired=!1,this.htmlFor=void 0,this.href=null,this.target=null,this.isDownloadable=!1,this.filename="download",this.sanitizedHref=""}async updateSanitizedHref(){if("a"===this.getTagName&&null!==this.href){const{sanitizeUrl:t}=await import("./p-noyWJ11s.js").then((function(t){return t.i}));this.sanitizedHref=t(this.href)}else this.sanitizedHref=""}async componentWillLoad(){"a"===this.getTagName&&null!==this.href&&await this.updateSanitizedHref(),this.inheritedAttributes={...i(this.el)}}get getTagName(){return"link"===this.variant?"a":this.element.toLowerCase()}getVariantConfig(){return l[this.variant]??{}}getAccessibilityTags(){const{isRequired:t=null}=this.getVariantConfig(),e=["a","label"].includes(this.getTagName);return{"aria-required":this.isRequired&&t,"aria-disabled":this.state===o.DISABLED&&e}}getVariantStateStyles(){const t=this.getVariantConfig();return{[`bds-typography--${this.variant}`]:!0,[`bds-typography--align-${this.align}`]:!0,[`bds-typography--${this.state}`]:!(!t?.states||!t?.states.includes(this.state)),[`bds-typography--size-${this.size}`]:!(!t?.size||!t?.size.includes(this.size)),"bds-typography--required":!(!t?.isRequired||!this.isRequired),"bds-typography--ellipsis":this.ellipsis&&this.maxLines<=1,"bds-typography--ellipsis-multiline":this.ellipsis&&this.maxLines>1,[this.customClass]:""!==this.customClass}}render(){const t=this.getTagName,r={...(i=this,h=t,{a:{href:i.state!==o.DISABLED?i.sanitizedHref:null,target:i.target,download:i.isDownloadable?i.filename:null,rel:"_blank"===i.target?"noopener noreferrer":void 0},label:{htmlFor:i.htmlFor}}[h]||{}),...this.inheritedAttributes,...this.getAccessibilityTags()};var i,h;const l=this.getVariantStateStyles(),{canUseTooltip:s=null,isRequired:p=null}=this.getVariantConfig();return e(a,{key:"e816237127a0bec2f223c3c11c405830b3bc530f",class:"bds-typography"},e(t,{key:"5428ad8d55990feae5190e19c6372445f76d504b",class:l,style:{webkitLineClamp:this.maxLines},...r},e("slot",{key:"5f5b95afd7799c988607174d45dfdffe018438a8"}),this.isRequired&&p&&e("em",{key:"5d57fc3a0aed14887df9fb03f2b279204e99861c",class:"bds-typography__required-indicator","aria-hidden":"true"},"*"),this.tooltipText&&s&&e("em",{key:"9b89f3e48de66ebcd27755d9ec19ef261b73250e",class:"bds-typography__info-icon bds-icon-info-circle"})))}get el(){return r(this)}static get watchers(){return{href:[{updateSanitizedHref:0}]}}};s.style=".bds-typography{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:var(--boreal-typography-font-family-primary);font-weight:var(--boreal-typography-font-weight-regular)}.bds-typography__required-indicator{color:var(--boreal-icon-danger-base);font-weight:var(--boreal-typography-font-weight-regular)}.bds-typography__info-icon{color:var(--boreal-icon-default-light)}.bds-typography--heading,.bds-typography--subheading{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-3xs)}.bds-typography--label{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-3xs)}.bds-typography--display{display:block}.bds-typography--caption,.bds-typography--helper,.bds-typography--link{display:inline-block}.bds-typography--caption{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-default-light)}.bds-typography--helper{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-sm);color:var(--boreal-text-default-light)}.bds-typography--link{font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-primary-base);text-decoration:none}.bds-typography--link:hover{text-decoration:underline}.bds-typography--link:visited{color:var(--boreal-text-primary-base)}.bds-typography--link:active{color:var(--boreal-text-primary-dark)}.bds-typography--link.bds-typography--size-sm{font-size:var(--boreal-typography-font-size-xs)}.bds-typography--link.bds-typography--size-md{font-size:var(--boreal-typography-font-size-sm)}.bds-typography--code{font-family:var(--boreal-typography-font-family-secondary);font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default);line-height:var(--boreal-typography-line-height-md);overflow-wrap:break-word;background-color:var(--boreal-bg-neutral);padding:var(--boreal-spacing-3xs) var(--boreal-spacing-xs);border-radius:var(--boreal-radius-xs);display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone}.bds-typography--label{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-default-darker)}.bds-typography--display{font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default)}.bds-typography--display.bds-typography--size-sm{font-size:var(--boreal-typography-font-size-xl);line-height:var(--boreal-typography-line-height-xl)}.bds-typography--display.bds-typography--size-md{font-size:var(--boreal-typography-font-size-2xl);line-height:var(--boreal-typography-line-height-2xl)}.bds-typography--display.bds-typography--size-lg{font-size:var(--boreal-typography-font-size-3xl);line-height:var(--boreal-typography-line-height-3xl);font-weight:var(--boreal-typography-font-weight-light)}.bds-typography--display.bds-typography--size-xl{font-size:var(--boreal-typography-font-size-4xl);line-height:var(--boreal-typography-line-height-4xl);font-weight:var(--boreal-typography-font-weight-light)}.bds-typography--heading{font-size:var(--boreal-typography-font-size-lg);line-height:var(--boreal-typography-line-height-lg);font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default)}.bds-typography h1.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-4xl);line-height:var(--boreal-typography-line-height-4xl)}.bds-typography h2.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-3xl);line-height:var(--boreal-typography-line-height-3xl)}.bds-typography h3.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-2xl);line-height:var(--boreal-typography-line-height-2xl)}.bds-typography h4.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-xl);line-height:var(--boreal-typography-line-height-xl)}.bds-typography h5.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-lg);line-height:var(--boreal-typography-line-height-lg)}.bds-typography h6.bds-typography--heading{font-size:var(--boreal-typography-font-size-md);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md)}.bds-typography--subheading{font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md);font-weight:var(--boreal-typography-font-weight-semibold)}.bds-typography--align-start{text-align:start}.bds-typography--align-center{text-align:center}.bds-typography--align-end{text-align:end}.bds-typography--align-inherit{text-align:inherit}.bds-typography--error{color:var(--boreal-text-danger-base)}.bds-typography--disabled{color:var(--boreal-text-disabled);pointer-events:none;cursor:not-allowed}.bds-typography--disabled .bds-typography__required-indicator{color:var(--boreal-text-danger-light)}.bds-typography--ellipsis{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.bds-typography--ellipsis-multiline{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;width:100%}";export{s as bds_typography}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var __awaiter=this&&this.__awaiter||function(t,e,n,r){function i(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,o){function a(t){try{u(r.next(t))}catch(t){o(t)}}function s(t){try{u(r["throw"](t))}catch(t){o(t)}}function u(t){t.done?n(t.value):i(t.value).then(a,s)}u((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,a=Object.create((typeof Iterator==="function"?Iterator:Object).prototype);return a.next=s(0),a["throw"]=s(1),a["return"]=s(2),typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(e){return u([t,e])}}function u(s){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(n=0)),n)try{if(r=1,i&&(o=s[0]&2?i["return"]:s[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,s[1])).done)return o;if(i=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;i=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){n.label=s[1];break}if(s[0]===6&&n.label<o[1]){n.label=o[1];o=s;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(s);break}if(o[2])n.ops.pop();n.trys.pop();continue}s=e.call(t,n)}catch(t){s=[6,t];i=0}finally{r=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};System.register(["./p-BQdH0ijK.system.js","./p-BbPAtVJG.system.js"],(function(t,e){"use strict";var n,r,i,o;return{setters:[function(e){n=e.p;r=e.H;i=e.b;t("setNonce",e.s)},function(t){o=t.g}],execute:function(){var t=this;var a=function(){{s(r.prototype)}var t=e.meta.url;var i={};if(t!==""){i.resourcesUrl=new URL(".",t).href}return n(i)};var s=function(t){var e=t.cloneNode;t.cloneNode=function(t){if(this.nodeName==="TEMPLATE"){return e.call(this,t)}var n=e.call(this,false);var r=this.childNodes;if(t){for(var i=0;i<r.length;i++){if(r[i].nodeType!==2){n.appendChild(r[i].cloneNode(true))}}}return n}};a().then((function(e){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,o()];case 1:t.sent();return[2,i([["p-e37e7dba.system",[[260,"bds-banner",{idComponent:[1,"id-component"],variant:[1],enableClose:[4,"enable-close"],isClosing:[32],isOpen:[32],closeBanner:[64]}]]],["p-
|
|
1
|
+
var __awaiter=this&&this.__awaiter||function(t,e,n,r){function i(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,o){function a(t){try{u(r.next(t))}catch(t){o(t)}}function s(t){try{u(r["throw"](t))}catch(t){o(t)}}function u(t){t.done?n(t.value):i(t.value).then(a,s)}u((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,a=Object.create((typeof Iterator==="function"?Iterator:Object).prototype);return a.next=s(0),a["throw"]=s(1),a["return"]=s(2),typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(e){return u([t,e])}}function u(s){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(n=0)),n)try{if(r=1,i&&(o=s[0]&2?i["return"]:s[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,s[1])).done)return o;if(i=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;i=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){n.label=s[1];break}if(s[0]===6&&n.label<o[1]){n.label=o[1];o=s;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(s);break}if(o[2])n.ops.pop();n.trys.pop();continue}s=e.call(t,n)}catch(t){s=[6,t];i=0}finally{r=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};System.register(["./p-BQdH0ijK.system.js","./p-BbPAtVJG.system.js"],(function(t,e){"use strict";var n,r,i,o;return{setters:[function(e){n=e.p;r=e.H;i=e.b;t("setNonce",e.s)},function(t){o=t.g}],execute:function(){var t=this;var a=function(){{s(r.prototype)}var t=e.meta.url;var i={};if(t!==""){i.resourcesUrl=new URL(".",t).href}return n(i)};var s=function(t){var e=t.cloneNode;t.cloneNode=function(t){if(this.nodeName==="TEMPLATE"){return e.call(this,t)}var n=e.call(this,false);var r=this.childNodes;if(t){for(var i=0;i<r.length;i++){if(r[i].nodeType!==2){n.appendChild(r[i].cloneNode(true))}}}return n}};a().then((function(e){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,o()];case 1:t.sent();return[2,i([["p-e37e7dba.system",[[260,"bds-banner",{idComponent:[1,"id-component"],variant:[1],enableClose:[4,"enable-close"],isClosing:[32],isOpen:[32],closeBanner:[64]}]]],["p-c3c558d2.system",[[260,"bds-typography",{variant:[513],size:[513],state:[513],customClass:[1,"custom-class"],element:[1],align:[1],ellipsis:[4],maxLines:[2,"max-lines"],tooltipText:[1,"tooltip-text"],isRequired:[516,"is-required"],htmlFor:[1,"html-for"],href:[1],target:[1],isDownloadable:[4,"is-downloadable"],filename:[1],sanitizedHref:[32]},null,{href:[{updateSanitizedHref:0}]}]]]],e)]}}))}))}))}}}));
|
package/dist/boreal-web-components/{p-5666a22a.system.entry.js → p-c3c558d2.system.entry.js}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
var __assign=this&&this.__assign||function(){__assign=Object.assign||function(t){for(var e,r=1,a=arguments.length;r<a;r++){e=arguments[r];for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i))t[i]=e[i]}return t};return __assign.apply(this,arguments)};var __awaiter=this&&this.__awaiter||function(t,e,r,a){function i(t){return t instanceof r?t:new r((function(e){e(t)}))}return new(r||(r=Promise))((function(r,o){function n(t){try{h(a.next(t))}catch(t){o(t)}}function l(t){try{h(a["throw"](t))}catch(t){o(t)}}function h(t){t.done?r(t.value):i(t.value).then(n,l)}h((a=a.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var r={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},a,i,o,n=Object.create((typeof Iterator==="function"?Iterator:Object).prototype);return n.next=l(0),n["throw"]=l(1),n["return"]=l(2),typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function l(t){return function(e){return h([t,e])}}function h(l){if(a)throw new TypeError("Generator is already executing.");while(n&&(n=0,l[0]&&(r=0)),r)try{if(a=1,i&&(o=l[0]&2?i["return"]:l[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,l[1])).done)return o;if(i=0,o)l=[l[0]&2,o.value];switch(l[0]){case 0:case 1:o=l;break;case 4:r.label++;return{value:l[1],done:false};case 5:r.label++;i=l[1];l=[0];continue;case 7:l=r.ops.pop();r.trys.pop();continue;default:if(!(o=r.trys,o=o.length>0&&o[o.length-1])&&(l[0]===6||l[0]===2)){r=0;continue}if(l[0]===3&&(!o||l[1]>o[0]&&l[1]<o[3])){r.label=l[1];break}if(l[0]===6&&r.label<o[1]){r.label=o[1];o=l;break}if(o&&r.label<o[2]){r.label=o[2];r.ops.push(l);break}if(o[2])r.ops.pop();r.trys.pop();continue}l=e.call(t,r)}catch(t){l=[6,t];i=0}finally{a=o=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:true}}};System.register(["./p-BQdH0ijK.system.js","./p-CaVEtaG3.system.js"],(function(t,e){"use strict";var r,a,i,o,n,l;return{setters:[function(t){r=t.r;a=t.h;i=t.a;o=t.g},function(t){n=t.a;l=t.i}],execute:function(){var h={START:"start"};var s={XS:"xs",S:"sm",M:"md",L:"lg",XL:"xl"};var p={DISPLAY:"display",LINK:"link"};var y={P:"p",A:"a"};var g="download";var b={link:{states:[n.DISABLED],size:[s.S,s.M]},label:{states:[n.DISABLED],isRequired:true,canUseTooltip:true},heading:{canUseTooltip:true},subheading:{canUseTooltip:true},helper:{states:[n.ERROR]},display:{size:[s.XS,s.S,s.M,s.L,s.XL]}};var d=function(t,e){var r={a:{href:t.state!==n.DISABLED?t.sanitizedHref:null,target:t.target,download:t.isDownloadable?t.filename:null,rel:t.target==="_blank"?"noopener noreferrer":undefined},label:{htmlFor:t.htmlFor}};return r[e]||{}};var f=function(){return".bds-typography{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:var(--boreal-typography-font-family-primary);font-weight:var(--boreal-typography-font-weight-regular)}.bds-typography__required-indicator{color:var(--boreal-icon-danger-base);font-weight:var(--boreal-typography-font-weight-regular)}.bds-typography__info-icon{color:var(--boreal-icon-default-light)}.bds-typography--heading,.bds-typography--subheading{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-3xs)}.bds-typography--label{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-3xs)}.bds-typography--display{display:block}.bds-typography--caption,.bds-typography--helper,.bds-typography--link{display:inline-block}.bds-typography--caption{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-default-light)}.bds-typography--helper{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-sm);color:var(--boreal-text-default-light)}.bds-typography--link{font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-primary-base);text-decoration:none}.bds-typography--link:hover{text-decoration:underline}.bds-typography--link:visited{color:var(--boreal-text-primary-base)}.bds-typography--link:active{color:var(--boreal-text-primary-dark)}.bds-typography--link.bds-typography--size-sm{font-size:var(--boreal-typography-font-size-xs)}.bds-typography--link.bds-typography--size-md{font-size:var(--boreal-typography-font-size-sm)}.bds-typography--code{font-family:var(--boreal-typography-font-family-secondary);font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default);line-height:var(--boreal-typography-line-height-md);overflow-wrap:break-word;background-color:var(--boreal-bg-neutral);padding:var(--boreal-spacing-3xs) var(--boreal-spacing-xs);border-radius:var(--boreal-radius-xs);display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone}.bds-typography--label{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-default-darker)}.bds-typography--display{font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default)}.bds-typography--display.bds-typography--size-sm{font-size:var(--boreal-typography-font-size-xl);line-height:var(--boreal-typography-line-height-xl)}.bds-typography--display.bds-typography--size-md{font-size:var(--boreal-typography-font-size-2xl);line-height:var(--boreal-typography-line-height-2xl)}.bds-typography--display.bds-typography--size-lg{font-size:var(--boreal-typography-font-size-3xl);line-height:var(--boreal-typography-line-height-3xl);font-weight:var(--boreal-typography-font-weight-light)}.bds-typography--display.bds-typography--size-xl{font-size:var(--boreal-typography-font-size-4xl);line-height:var(--boreal-typography-line-height-4xl);font-weight:var(--boreal-typography-font-weight-light)}.bds-typography--heading{font-size:var(--boreal-typography-font-size-lg);line-height:var(--boreal-typography-line-height-lg);font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default)}.bds-typography h1.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-4xl);line-height:var(--boreal-typography-line-height-4xl)}.bds-typography h2.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-3xl);line-height:var(--boreal-typography-line-height-3xl)}.bds-typography h3.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-2xl);line-height:var(--boreal-typography-line-height-2xl)}.bds-typography h4.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-xl);line-height:var(--boreal-typography-line-height-xl)}.bds-typography h5.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-lg);line-height:var(--boreal-typography-line-height-lg)}.bds-typography h6.bds-typography--heading{font-size:var(--boreal-typography-font-size-md);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md)}.bds-typography--subheading{font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md);font-weight:var(--boreal-typography-font-weight-semibold)}.bds-typography--align-start{text-align:start}.bds-typography--align-center{text-align:center}.bds-typography--align-end{text-align:end}.bds-typography--align-inherit{text-align:inherit}.bds-typography--error{color:var(--boreal-text-danger-base)}.bds-typography--disabled{color:var(--boreal-text-disabled);pointer-events:none;cursor:not-allowed}.bds-typography--disabled .bds-typography__required-indicator{color:var(--boreal-text-danger-light)}.bds-typography--ellipsis{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.bds-typography--ellipsis-multiline{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;width:100%}"};var u=t("bds_typography",function(){function t(t){r(this,t);this.inheritedAttributes={};this.variant=p.DISPLAY;this.size=s.M;this.state=n.DEFAULT;this.customClass="";this.element=y.P;this.align=h.START;this.ellipsis=false;this.maxLines=1;this.tooltipText="";this.isRequired=false;this.htmlFor=undefined;this.href=null;this.target=null;this.isDownloadable=false;this.filename=g;this.sanitizedHref=""}t.prototype.updateSanitizedHref=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(r){switch(r.label){case 0:if(!(this.getTagName==="a"&&this.href!==null))return[3,2];return[4,e.import("./p-B-PpI2Xv.system.js").then((function(t){return t.i}))];case 1:t=r.sent().sanitizeUrl;this.sanitizedHref=t(this.href);return[3,3];case 2:this.sanitizedHref="";r.label=3;case 3:return[2]}}))}))};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:if(!(this.getTagName===y.A&&this.href!==null))return[3,2];return[4,this.updateSanitizedHref()];case 1:t.sent();t.label=2;case 2:this.inheritedAttributes=__assign({},l(this.el));return[2]}}))}))};Object.defineProperty(t.prototype,"getTagName",{get:function(){if(this.variant===p.LINK)return y.A;return this.element.toLowerCase()},enumerable:false,configurable:true});t.prototype.getVariantConfig=function(){var t;return(t=b[this.variant])!==null&&t!==void 0?t:{}};t.prototype.getAccessibilityTags=function(){var t=this.getVariantConfig().isRequired,e=t===void 0?null:t;var r=["a","label"].includes(this.getTagName);return{"aria-required":this.isRequired&&e,"aria-disabled":this.state===n.DISABLED&&r}};t.prototype.getVariantStateStyles=function(){var t;var e=this.getVariantConfig();return t={},t["bds-typography--".concat(this.variant)]=true,t["bds-typography--align-".concat(this.align)]=true,t["bds-typography--".concat(this.state)]=!!((e===null||e===void 0?void 0:e.states)&&(e===null||e===void 0?void 0:e.states.includes(this.state))),t["bds-typography--size-".concat(this.size)]=!!((e===null||e===void 0?void 0:e.size)&&(e===null||e===void 0?void 0:e.size.includes(this.size))),t["bds-typography--required"]=!!((e===null||e===void 0?void 0:e.isRequired)&&this.isRequired),t["bds-typography--ellipsis"]=this.ellipsis&&this.maxLines<=1,t["bds-typography--ellipsis-multiline"]=this.ellipsis&&this.maxLines>1,t[this.customClass]=this.customClass!=="",t};t.prototype.render=function(){var t=this.getTagName;var e=__assign(__assign(__assign({},d(this,t)),this.inheritedAttributes),this.getAccessibilityTags());var r=this.getVariantStateStyles();var o=this.getVariantConfig(),n=o.canUseTooltip,l=n===void 0?null:n,h=o.isRequired,s=h===void 0?null:h;return a(i,{key:"6091692b1cb6bf1d3295f0834c8d25425633d65a",class:"bds-typography"},a(t,__assign({key:"0cc91c35fa1cc36c99101a79fae0c8b5cf44de43",class:r,style:{webkitLineClamp:this.maxLines}},e),a("slot",{key:"973848fba8211cb5ef869e0e48fb1806bd5efdec"}),this.isRequired&&s&&a("em",{key:"dd89574e9dedd55905ae4c7bcd57604f26fbd03b",class:"bds-typography__required-indicator","aria-hidden":"true"},"*"),this.tooltipText&&l&&a("em",{key:"473b0de17bd095b97d54d24d2f3aa75f8a8e4922",class:"bds-typography__info-icon bds-icon-info-circle"})))};Object.defineProperty(t.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{href:[{updateSanitizedHref:0}]}},enumerable:false,configurable:true});return t}());u.style=f()}}}));
|
|
1
|
+
var __assign=this&&this.__assign||function(){__assign=Object.assign||function(t){for(var e,r=1,a=arguments.length;r<a;r++){e=arguments[r];for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i))t[i]=e[i]}return t};return __assign.apply(this,arguments)};var __awaiter=this&&this.__awaiter||function(t,e,r,a){function i(t){return t instanceof r?t:new r((function(e){e(t)}))}return new(r||(r=Promise))((function(r,o){function n(t){try{h(a.next(t))}catch(t){o(t)}}function l(t){try{h(a["throw"](t))}catch(t){o(t)}}function h(t){t.done?r(t.value):i(t.value).then(n,l)}h((a=a.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var r={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},a,i,o,n=Object.create((typeof Iterator==="function"?Iterator:Object).prototype);return n.next=l(0),n["throw"]=l(1),n["return"]=l(2),typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function l(t){return function(e){return h([t,e])}}function h(l){if(a)throw new TypeError("Generator is already executing.");while(n&&(n=0,l[0]&&(r=0)),r)try{if(a=1,i&&(o=l[0]&2?i["return"]:l[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,l[1])).done)return o;if(i=0,o)l=[l[0]&2,o.value];switch(l[0]){case 0:case 1:o=l;break;case 4:r.label++;return{value:l[1],done:false};case 5:r.label++;i=l[1];l=[0];continue;case 7:l=r.ops.pop();r.trys.pop();continue;default:if(!(o=r.trys,o=o.length>0&&o[o.length-1])&&(l[0]===6||l[0]===2)){r=0;continue}if(l[0]===3&&(!o||l[1]>o[0]&&l[1]<o[3])){r.label=l[1];break}if(l[0]===6&&r.label<o[1]){r.label=o[1];o=l;break}if(o&&r.label<o[2]){r.label=o[2];r.ops.push(l);break}if(o[2])r.ops.pop();r.trys.pop();continue}l=e.call(t,r)}catch(t){l=[6,t];i=0}finally{a=o=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:true}}};System.register(["./p-BQdH0ijK.system.js","./p-CaVEtaG3.system.js"],(function(t,e){"use strict";var r,a,i,o,n,l;return{setters:[function(t){r=t.r;a=t.h;i=t.a;o=t.g},function(t){n=t.a;l=t.i}],execute:function(){var h={START:"start"};var s={XS:"xs",S:"sm",M:"md",L:"lg",XL:"xl"};var p={DISPLAY:"display",LINK:"link"};var y={P:"p",A:"a"};var g="download";var b={link:{states:[n.DISABLED],size:[s.S,s.M]},label:{states:[n.DISABLED],isRequired:true,canUseTooltip:true},heading:{canUseTooltip:true},subheading:{canUseTooltip:true},helper:{states:[n.ERROR]},display:{size:[s.XS,s.S,s.M,s.L,s.XL]}};var d=function(t,e){var r={a:{href:t.state!==n.DISABLED?t.sanitizedHref:null,target:t.target,download:t.isDownloadable?t.filename:null,rel:t.target==="_blank"?"noopener noreferrer":undefined},label:{htmlFor:t.htmlFor}};return r[e]||{}};var f=function(){return".bds-typography{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:var(--boreal-typography-font-family-primary);font-weight:var(--boreal-typography-font-weight-regular)}.bds-typography__required-indicator{color:var(--boreal-icon-danger-base);font-weight:var(--boreal-typography-font-weight-regular)}.bds-typography__info-icon{color:var(--boreal-icon-default-light)}.bds-typography--heading,.bds-typography--subheading{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-3xs)}.bds-typography--label{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-3xs)}.bds-typography--display{display:block}.bds-typography--caption,.bds-typography--helper,.bds-typography--link{display:inline-block}.bds-typography--caption{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-default-light)}.bds-typography--helper{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-sm);color:var(--boreal-text-default-light)}.bds-typography--link{font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-primary-base);text-decoration:none}.bds-typography--link:hover{text-decoration:underline}.bds-typography--link:visited{color:var(--boreal-text-primary-base)}.bds-typography--link:active{color:var(--boreal-text-primary-dark)}.bds-typography--link.bds-typography--size-sm{font-size:var(--boreal-typography-font-size-xs)}.bds-typography--link.bds-typography--size-md{font-size:var(--boreal-typography-font-size-sm)}.bds-typography--code{font-family:var(--boreal-typography-font-family-secondary);font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default);line-height:var(--boreal-typography-line-height-md);overflow-wrap:break-word;background-color:var(--boreal-bg-neutral);padding:var(--boreal-spacing-3xs) var(--boreal-spacing-xs);border-radius:var(--boreal-radius-xs);display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone}.bds-typography--label{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-default-darker)}.bds-typography--display{font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default)}.bds-typography--display.bds-typography--size-sm{font-size:var(--boreal-typography-font-size-xl);line-height:var(--boreal-typography-line-height-xl)}.bds-typography--display.bds-typography--size-md{font-size:var(--boreal-typography-font-size-2xl);line-height:var(--boreal-typography-line-height-2xl)}.bds-typography--display.bds-typography--size-lg{font-size:var(--boreal-typography-font-size-3xl);line-height:var(--boreal-typography-line-height-3xl);font-weight:var(--boreal-typography-font-weight-light)}.bds-typography--display.bds-typography--size-xl{font-size:var(--boreal-typography-font-size-4xl);line-height:var(--boreal-typography-line-height-4xl);font-weight:var(--boreal-typography-font-weight-light)}.bds-typography--heading{font-size:var(--boreal-typography-font-size-lg);line-height:var(--boreal-typography-line-height-lg);font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default)}.bds-typography h1.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-4xl);line-height:var(--boreal-typography-line-height-4xl)}.bds-typography h2.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-3xl);line-height:var(--boreal-typography-line-height-3xl)}.bds-typography h3.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-2xl);line-height:var(--boreal-typography-line-height-2xl)}.bds-typography h4.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-xl);line-height:var(--boreal-typography-line-height-xl)}.bds-typography h5.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-lg);line-height:var(--boreal-typography-line-height-lg)}.bds-typography h6.bds-typography--heading{font-size:var(--boreal-typography-font-size-md);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md)}.bds-typography--subheading{font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md);font-weight:var(--boreal-typography-font-weight-semibold)}.bds-typography--align-start{text-align:start}.bds-typography--align-center{text-align:center}.bds-typography--align-end{text-align:end}.bds-typography--align-inherit{text-align:inherit}.bds-typography--error{color:var(--boreal-text-danger-base)}.bds-typography--disabled{color:var(--boreal-text-disabled);pointer-events:none;cursor:not-allowed}.bds-typography--disabled .bds-typography__required-indicator{color:var(--boreal-text-danger-light)}.bds-typography--ellipsis{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.bds-typography--ellipsis-multiline{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;width:100%}"};var u=t("bds_typography",function(){function t(t){r(this,t);this.inheritedAttributes={};this.variant=p.DISPLAY;this.size=s.M;this.state=n.DEFAULT;this.customClass="";this.element=y.P;this.align=h.START;this.ellipsis=false;this.maxLines=1;this.tooltipText="";this.isRequired=false;this.htmlFor=undefined;this.href=null;this.target=null;this.isDownloadable=false;this.filename=g;this.sanitizedHref=""}t.prototype.updateSanitizedHref=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(r){switch(r.label){case 0:if(!(this.getTagName==="a"&&this.href!==null))return[3,2];return[4,e.import("./p-B-PpI2Xv.system.js").then((function(t){return t.i}))];case 1:t=r.sent().sanitizeUrl;this.sanitizedHref=t(this.href);return[3,3];case 2:this.sanitizedHref="";r.label=3;case 3:return[2]}}))}))};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:if(!(this.getTagName===y.A&&this.href!==null))return[3,2];return[4,this.updateSanitizedHref()];case 1:t.sent();t.label=2;case 2:this.inheritedAttributes=__assign({},l(this.el));return[2]}}))}))};Object.defineProperty(t.prototype,"getTagName",{get:function(){if(this.variant===p.LINK)return y.A;return this.element.toLowerCase()},enumerable:false,configurable:true});t.prototype.getVariantConfig=function(){var t;return(t=b[this.variant])!==null&&t!==void 0?t:{}};t.prototype.getAccessibilityTags=function(){var t=this.getVariantConfig().isRequired,e=t===void 0?null:t;var r=["a","label"].includes(this.getTagName);return{"aria-required":this.isRequired&&e,"aria-disabled":this.state===n.DISABLED&&r}};t.prototype.getVariantStateStyles=function(){var t;var e=this.getVariantConfig();return t={},t["bds-typography--".concat(this.variant)]=true,t["bds-typography--align-".concat(this.align)]=true,t["bds-typography--".concat(this.state)]=!!((e===null||e===void 0?void 0:e.states)&&(e===null||e===void 0?void 0:e.states.includes(this.state))),t["bds-typography--size-".concat(this.size)]=!!((e===null||e===void 0?void 0:e.size)&&(e===null||e===void 0?void 0:e.size.includes(this.size))),t["bds-typography--required"]=!!((e===null||e===void 0?void 0:e.isRequired)&&this.isRequired),t["bds-typography--ellipsis"]=this.ellipsis&&this.maxLines<=1,t["bds-typography--ellipsis-multiline"]=this.ellipsis&&this.maxLines>1,t[this.customClass]=this.customClass!=="",t};t.prototype.render=function(){var t=this.getTagName;var e=__assign(__assign(__assign({},d(this,t)),this.inheritedAttributes),this.getAccessibilityTags());var r=this.getVariantStateStyles();var o=this.getVariantConfig(),n=o.canUseTooltip,l=n===void 0?null:n,h=o.isRequired,s=h===void 0?null:h;return a(i,{key:"e816237127a0bec2f223c3c11c405830b3bc530f",class:"bds-typography"},a(t,__assign({key:"5428ad8d55990feae5190e19c6372445f76d504b",class:r,style:{webkitLineClamp:this.maxLines}},e),a("slot",{key:"5f5b95afd7799c988607174d45dfdffe018438a8"}),this.isRequired&&s&&a("em",{key:"5d57fc3a0aed14887df9fb03f2b279204e99861c",class:"bds-typography__required-indicator","aria-hidden":"true"},"*"),this.tooltipText&&l&&a("em",{key:"9b89f3e48de66ebcd27755d9ec19ef261b73250e",class:"bds-typography__info-icon bds-icon-info-circle"})))};Object.defineProperty(t.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{href:[{updateSanitizedHref:0}]}},enumerable:false,configurable:true});return t}());u.style=f()}}}));
|
|
@@ -153,7 +153,7 @@ const BdsTypography = class {
|
|
|
153
153
|
};
|
|
154
154
|
const classes = this.getVariantStateStyles();
|
|
155
155
|
const { canUseTooltip = null, isRequired = null } = this.getVariantConfig();
|
|
156
|
-
return (index.h(index.Host, { key: '
|
|
156
|
+
return (index.h(index.Host, { key: 'e816237127a0bec2f223c3c11c405830b3bc530f', class: "bds-typography" }, index.h(TagName, { key: '5428ad8d55990feae5190e19c6372445f76d504b', class: classes, style: { webkitLineClamp: this.maxLines }, ...attributes }, index.h("slot", { key: '5f5b95afd7799c988607174d45dfdffe018438a8' }), this.isRequired && isRequired && (index.h("em", { key: '5d57fc3a0aed14887df9fb03f2b279204e99861c', class: "bds-typography__required-indicator", "aria-hidden": "true" }, "*")), this.tooltipText && canUseTooltip && index.h("em", { key: '9b89f3e48de66ebcd27755d9ec19ef261b73250e', class: "bds-typography__info-icon bds-icon-info-circle" }))));
|
|
157
157
|
}
|
|
158
158
|
get el() { return index.getElement(this); }
|
|
159
159
|
static get watchers() { return {
|
|
@@ -40,7 +40,7 @@ var patchCloneNodeFix = (HTMLElementPrototype) => {
|
|
|
40
40
|
|
|
41
41
|
patchBrowser().then(async (options) => {
|
|
42
42
|
await appGlobals.globalScripts();
|
|
43
|
-
return index.bootstrapLazy([["bds-banner.cjs",[[260,"bds-banner",{"idComponent":[1,"id-component"],"variant":[1],"enableClose":[4,"enable-close"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-typography.cjs",[[260,"bds-typography",{"variant":[513],"size":[513],"state":[513],"customClass":[1,"custom-class"],"element":[1],"align":[1],"ellipsis":[4],"maxLines":[2,"max-lines"],"tooltipText":[1,"tooltip-text"],"isRequired":[516,"is-required"],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"isDownloadable":[4,"is-downloadable"],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}]]]
|
|
43
|
+
return index.bootstrapLazy([["bds-banner.cjs",[[260,"bds-banner",{"idComponent":[1,"id-component"],"variant":[1],"enableClose":[4,"enable-close"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-typography.cjs",[[260,"bds-typography",{"variant":[513],"size":[513],"state":[513],"customClass":[1,"custom-class"],"element":[1],"align":[1],"ellipsis":[4],"maxLines":[2,"max-lines"],"tooltipText":[1,"tooltip-text"],"isRequired":[516,"is-required"],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"isDownloadable":[4,"is-downloadable"],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}]]]], options);
|
|
44
44
|
});
|
|
45
45
|
|
|
46
46
|
exports.setNonce = index.setNonce;
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
|
|
|
6
6
|
const defineCustomElements = async (win, options) => {
|
|
7
7
|
if (typeof window === 'undefined') return undefined;
|
|
8
8
|
await appGlobals.globalScripts();
|
|
9
|
-
return index.bootstrapLazy([["bds-banner.cjs",[[260,"bds-banner",{"idComponent":[1,"id-component"],"variant":[1],"enableClose":[4,"enable-close"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-typography.cjs",[[260,"bds-typography",{"variant":[513],"size":[513],"state":[513],"customClass":[1,"custom-class"],"element":[1],"align":[1],"ellipsis":[4],"maxLines":[2,"max-lines"],"tooltipText":[1,"tooltip-text"],"isRequired":[516,"is-required"],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"isDownloadable":[4,"is-downloadable"],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}]]]
|
|
9
|
+
return index.bootstrapLazy([["bds-banner.cjs",[[260,"bds-banner",{"idComponent":[1,"id-component"],"variant":[1],"enableClose":[4,"enable-close"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-typography.cjs",[[260,"bds-typography",{"variant":[513],"size":[513],"state":[513],"customClass":[1,"custom-class"],"element":[1],"align":[1],"ellipsis":[4],"maxLines":[2,"max-lines"],"tooltipText":[1,"tooltip-text"],"isRequired":[516,"is-required"],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"isDownloadable":[4,"is-downloadable"],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}]]]], options);
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
exports.setNonce = index.setNonce;
|
|
@@ -147,7 +147,7 @@ export class BdsTypography {
|
|
|
147
147
|
};
|
|
148
148
|
const classes = this.getVariantStateStyles();
|
|
149
149
|
const { canUseTooltip = null, isRequired = null } = this.getVariantConfig();
|
|
150
|
-
return (h(Host, { key: '
|
|
150
|
+
return (h(Host, { key: 'e816237127a0bec2f223c3c11c405830b3bc530f', class: "bds-typography" }, h(TagName, { key: '5428ad8d55990feae5190e19c6372445f76d504b', class: classes, style: { webkitLineClamp: this.maxLines }, ...attributes }, h("slot", { key: '5f5b95afd7799c988607174d45dfdffe018438a8' }), this.isRequired && isRequired && (h("em", { key: '5d57fc3a0aed14887df9fb03f2b279204e99861c', class: "bds-typography__required-indicator", "aria-hidden": "true" }, "*")), this.tooltipText && canUseTooltip && h("em", { key: '9b89f3e48de66ebcd27755d9ec19ef261b73250e', class: "bds-typography__info-icon bds-icon-info-circle" }))));
|
|
151
151
|
}
|
|
152
152
|
static get is() { return "bds-typography"; }
|
|
153
153
|
static get originalStyleUrls() {
|
|
@@ -151,7 +151,7 @@ const BdsTypography = class {
|
|
|
151
151
|
};
|
|
152
152
|
const classes = this.getVariantStateStyles();
|
|
153
153
|
const { canUseTooltip = null, isRequired = null } = this.getVariantConfig();
|
|
154
|
-
return (h(Host, { key: '
|
|
154
|
+
return (h(Host, { key: 'e816237127a0bec2f223c3c11c405830b3bc530f', class: "bds-typography" }, h(TagName, { key: '5428ad8d55990feae5190e19c6372445f76d504b', class: classes, style: { webkitLineClamp: this.maxLines }, ...attributes }, h("slot", { key: '5f5b95afd7799c988607174d45dfdffe018438a8' }), this.isRequired && isRequired && (h("em", { key: '5d57fc3a0aed14887df9fb03f2b279204e99861c', class: "bds-typography__required-indicator", "aria-hidden": "true" }, "*")), this.tooltipText && canUseTooltip && h("em", { key: '9b89f3e48de66ebcd27755d9ec19ef261b73250e', class: "bds-typography__info-icon bds-icon-info-circle" }))));
|
|
155
155
|
}
|
|
156
156
|
get el() { return getElement(this); }
|
|
157
157
|
static get watchers() { return {
|
|
@@ -38,5 +38,5 @@ var patchCloneNodeFix = (HTMLElementPrototype) => {
|
|
|
38
38
|
|
|
39
39
|
patchBrowser().then(async (options) => {
|
|
40
40
|
await globalScripts();
|
|
41
|
-
return bootstrapLazy([["bds-banner",[[260,"bds-banner",{"idComponent":[1,"id-component"],"variant":[1],"enableClose":[4,"enable-close"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-typography",[[260,"bds-typography",{"variant":[513],"size":[513],"state":[513],"customClass":[1,"custom-class"],"element":[1],"align":[1],"ellipsis":[4],"maxLines":[2,"max-lines"],"tooltipText":[1,"tooltip-text"],"isRequired":[516,"is-required"],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"isDownloadable":[4,"is-downloadable"],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}]]]
|
|
41
|
+
return bootstrapLazy([["bds-banner",[[260,"bds-banner",{"idComponent":[1,"id-component"],"variant":[1],"enableClose":[4,"enable-close"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-typography",[[260,"bds-typography",{"variant":[513],"size":[513],"state":[513],"customClass":[1,"custom-class"],"element":[1],"align":[1],"ellipsis":[4],"maxLines":[2,"max-lines"],"tooltipText":[1,"tooltip-text"],"isRequired":[516,"is-required"],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"isDownloadable":[4,"is-downloadable"],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}]]]], options);
|
|
42
42
|
});
|
package/dist/esm/loader.js
CHANGED
|
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-DQuL1Twl.js';
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await globalScripts();
|
|
8
|
-
return bootstrapLazy([["bds-banner",[[260,"bds-banner",{"idComponent":[1,"id-component"],"variant":[1],"enableClose":[4,"enable-close"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-typography",[[260,"bds-typography",{"variant":[513],"size":[513],"state":[513],"customClass":[1,"custom-class"],"element":[1],"align":[1],"ellipsis":[4],"maxLines":[2,"max-lines"],"tooltipText":[1,"tooltip-text"],"isRequired":[516,"is-required"],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"isDownloadable":[4,"is-downloadable"],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}]]]
|
|
8
|
+
return bootstrapLazy([["bds-banner",[[260,"bds-banner",{"idComponent":[1,"id-component"],"variant":[1],"enableClose":[4,"enable-close"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-typography",[[260,"bds-typography",{"variant":[513],"size":[513],"state":[513],"customClass":[1,"custom-class"],"element":[1],"align":[1],"ellipsis":[4],"maxLines":[2,"max-lines"],"tooltipText":[1,"tooltip-text"],"isRequired":[516,"is-required"],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"isDownloadable":[4,"is-downloadable"],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}]]]], options);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { defineCustomElements };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var __assign=this&&this.__assign||function(){__assign=Object.assign||function(t){for(var e,r=1,a=arguments.length;r<a;r++){e=arguments[r];for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i))t[i]=e[i]}return t};return __assign.apply(this,arguments)};var __awaiter=this&&this.__awaiter||function(t,e,r,a){function i(t){return t instanceof r?t:new r((function(e){e(t)}))}return new(r||(r=Promise))((function(r,o){function n(t){try{s(a.next(t))}catch(t){o(t)}}function h(t){try{s(a["throw"](t))}catch(t){o(t)}}function s(t){t.done?r(t.value):i(t.value).then(n,h)}s((a=a.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var r={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},a,i,o,n=Object.create((typeof Iterator==="function"?Iterator:Object).prototype);return n.next=h(0),n["throw"]=h(1),n["return"]=h(2),typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function h(t){return function(e){return s([t,e])}}function s(h){if(a)throw new TypeError("Generator is already executing.");while(n&&(n=0,h[0]&&(r=0)),r)try{if(a=1,i&&(o=h[0]&2?i["return"]:h[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,h[1])).done)return o;if(i=0,o)h=[h[0]&2,o.value];switch(h[0]){case 0:case 1:o=h;break;case 4:r.label++;return{value:h[1],done:false};case 5:r.label++;i=h[1];h=[0];continue;case 7:h=r.ops.pop();r.trys.pop();continue;default:if(!(o=r.trys,o=o.length>0&&o[o.length-1])&&(h[0]===6||h[0]===2)){r=0;continue}if(h[0]===3&&(!o||h[1]>o[0]&&h[1]<o[3])){r.label=h[1];break}if(h[0]===6&&r.label<o[1]){r.label=o[1];o=h;break}if(o&&r.label<o[2]){r.label=o[2];r.ops.push(h);break}if(o[2])r.ops.pop();r.trys.pop();continue}h=e.call(t,r)}catch(t){h=[6,t];i=0}finally{a=o=0}if(h[0]&5)throw h[1];return{value:h[0]?h[1]:void 0,done:true}}};import{r as registerInstance,h,a as Host,g as getElement}from"./index-DgFiTd6X.js";import{a as STATES,i as inheritAriaAttributes}from"./attributes-B9wshZ_4.js";var ALIGNMENT={START:"start"};var SIZES={XS:"xs",S:"sm",M:"md",L:"lg",XL:"xl"};var VARIANT_TYPOGRAPHY={DISPLAY:"display",LINK:"link"};var TAG_ELEMENT={P:"p",A:"a"};var FILENAME="download";var VARIANT_CONFIG={link:{states:[STATES.DISABLED],size:[SIZES.S,SIZES.M]},label:{states:[STATES.DISABLED],isRequired:true,canUseTooltip:true},heading:{canUseTooltip:true},subheading:{canUseTooltip:true},helper:{states:[STATES.ERROR]},display:{size:[SIZES.XS,SIZES.S,SIZES.M,SIZES.L,SIZES.XL]}};var getAttributesByTag=function(t,e){var r={a:{href:t.state!==STATES.DISABLED?t.sanitizedHref:null,target:t.target,download:t.isDownloadable?t.filename:null,rel:t.target==="_blank"?"noopener noreferrer":undefined},label:{htmlFor:t.htmlFor}};return r[e]||{}};var bdsTypographyCss=function(){return".bds-typography{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:var(--boreal-typography-font-family-primary);font-weight:var(--boreal-typography-font-weight-regular)}.bds-typography__required-indicator{color:var(--boreal-icon-danger-base);font-weight:var(--boreal-typography-font-weight-regular)}.bds-typography__info-icon{color:var(--boreal-icon-default-light)}.bds-typography--heading,.bds-typography--subheading{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-3xs)}.bds-typography--label{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-3xs)}.bds-typography--display{display:block}.bds-typography--caption,.bds-typography--helper,.bds-typography--link{display:inline-block}.bds-typography--caption{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-default-light)}.bds-typography--helper{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-sm);color:var(--boreal-text-default-light)}.bds-typography--link{font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-primary-base);text-decoration:none}.bds-typography--link:hover{text-decoration:underline}.bds-typography--link:visited{color:var(--boreal-text-primary-base)}.bds-typography--link:active{color:var(--boreal-text-primary-dark)}.bds-typography--link.bds-typography--size-sm{font-size:var(--boreal-typography-font-size-xs)}.bds-typography--link.bds-typography--size-md{font-size:var(--boreal-typography-font-size-sm)}.bds-typography--code{font-family:var(--boreal-typography-font-family-secondary);font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default);line-height:var(--boreal-typography-line-height-md);overflow-wrap:break-word;background-color:var(--boreal-bg-neutral);padding:var(--boreal-spacing-3xs) var(--boreal-spacing-xs);border-radius:var(--boreal-radius-xs);display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone}.bds-typography--label{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-default-darker)}.bds-typography--display{font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default)}.bds-typography--display.bds-typography--size-sm{font-size:var(--boreal-typography-font-size-xl);line-height:var(--boreal-typography-line-height-xl)}.bds-typography--display.bds-typography--size-md{font-size:var(--boreal-typography-font-size-2xl);line-height:var(--boreal-typography-line-height-2xl)}.bds-typography--display.bds-typography--size-lg{font-size:var(--boreal-typography-font-size-3xl);line-height:var(--boreal-typography-line-height-3xl);font-weight:var(--boreal-typography-font-weight-light)}.bds-typography--display.bds-typography--size-xl{font-size:var(--boreal-typography-font-size-4xl);line-height:var(--boreal-typography-line-height-4xl);font-weight:var(--boreal-typography-font-weight-light)}.bds-typography--heading{font-size:var(--boreal-typography-font-size-lg);line-height:var(--boreal-typography-line-height-lg);font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default)}.bds-typography h1.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-4xl);line-height:var(--boreal-typography-line-height-4xl)}.bds-typography h2.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-3xl);line-height:var(--boreal-typography-line-height-3xl)}.bds-typography h3.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-2xl);line-height:var(--boreal-typography-line-height-2xl)}.bds-typography h4.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-xl);line-height:var(--boreal-typography-line-height-xl)}.bds-typography h5.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-lg);line-height:var(--boreal-typography-line-height-lg)}.bds-typography h6.bds-typography--heading{font-size:var(--boreal-typography-font-size-md);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md)}.bds-typography--subheading{font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md);font-weight:var(--boreal-typography-font-weight-semibold)}.bds-typography--align-start{text-align:start}.bds-typography--align-center{text-align:center}.bds-typography--align-end{text-align:end}.bds-typography--align-inherit{text-align:inherit}.bds-typography--error{color:var(--boreal-text-danger-base)}.bds-typography--disabled{color:var(--boreal-text-disabled);pointer-events:none;cursor:not-allowed}.bds-typography--disabled .bds-typography__required-indicator{color:var(--boreal-text-danger-light)}.bds-typography--ellipsis{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.bds-typography--ellipsis-multiline{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;width:100%}"};var BdsTypography=function(){function t(t){registerInstance(this,t);this.inheritedAttributes={};this.variant=VARIANT_TYPOGRAPHY.DISPLAY;this.size=SIZES.M;this.state=STATES.DEFAULT;this.customClass="";this.element=TAG_ELEMENT.P;this.align=ALIGNMENT.START;this.ellipsis=false;this.maxLines=1;this.tooltipText="";this.isRequired=false;this.htmlFor=undefined;this.href=null;this.target=null;this.isDownloadable=false;this.filename=FILENAME;this.sanitizedHref=""}t.prototype.updateSanitizedHref=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:if(!(this.getTagName==="a"&&this.href!==null))return[3,2];return[4,import("./index-noyWJ11s.js").then((function(t){return t.i}))];case 1:t=e.sent().sanitizeUrl;this.sanitizedHref=t(this.href);return[3,3];case 2:this.sanitizedHref="";e.label=3;case 3:return[2]}}))}))};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:if(!(this.getTagName===TAG_ELEMENT.A&&this.href!==null))return[3,2];return[4,this.updateSanitizedHref()];case 1:t.sent();t.label=2;case 2:this.inheritedAttributes=__assign({},inheritAriaAttributes(this.el));return[2]}}))}))};Object.defineProperty(t.prototype,"getTagName",{get:function(){if(this.variant===VARIANT_TYPOGRAPHY.LINK)return TAG_ELEMENT.A;return this.element.toLowerCase()},enumerable:false,configurable:true});t.prototype.getVariantConfig=function(){var t;return(t=VARIANT_CONFIG[this.variant])!==null&&t!==void 0?t:{}};t.prototype.getAccessibilityTags=function(){var t=this.getVariantConfig().isRequired,e=t===void 0?null:t;var r=["a","label"].includes(this.getTagName);return{"aria-required":this.isRequired&&e,"aria-disabled":this.state===STATES.DISABLED&&r}};t.prototype.getVariantStateStyles=function(){var t;var e=this.getVariantConfig();return t={},t["bds-typography--".concat(this.variant)]=true,t["bds-typography--align-".concat(this.align)]=true,t["bds-typography--".concat(this.state)]=!!((e===null||e===void 0?void 0:e.states)&&(e===null||e===void 0?void 0:e.states.includes(this.state))),t["bds-typography--size-".concat(this.size)]=!!((e===null||e===void 0?void 0:e.size)&&(e===null||e===void 0?void 0:e.size.includes(this.size))),t["bds-typography--required"]=!!((e===null||e===void 0?void 0:e.isRequired)&&this.isRequired),t["bds-typography--ellipsis"]=this.ellipsis&&this.maxLines<=1,t["bds-typography--ellipsis-multiline"]=this.ellipsis&&this.maxLines>1,t[this.customClass]=this.customClass!=="",t};t.prototype.render=function(){var t=this.getTagName;var e=__assign(__assign(__assign({},getAttributesByTag(this,t)),this.inheritedAttributes),this.getAccessibilityTags());var r=this.getVariantStateStyles();var a=this.getVariantConfig(),i=a.canUseTooltip,o=i===void 0?null:i,n=a.isRequired,s=n===void 0?null:n;return h(Host,{key:"6091692b1cb6bf1d3295f0834c8d25425633d65a",class:"bds-typography"},h(t,__assign({key:"0cc91c35fa1cc36c99101a79fae0c8b5cf44de43",class:r,style:{webkitLineClamp:this.maxLines}},e),h("slot",{key:"973848fba8211cb5ef869e0e48fb1806bd5efdec"}),this.isRequired&&s&&h("em",{key:"dd89574e9dedd55905ae4c7bcd57604f26fbd03b",class:"bds-typography__required-indicator","aria-hidden":"true"},"*"),this.tooltipText&&o&&h("em",{key:"473b0de17bd095b97d54d24d2f3aa75f8a8e4922",class:"bds-typography__info-icon bds-icon-info-circle"})))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{href:[{updateSanitizedHref:0}]}},enumerable:false,configurable:true});return t}();BdsTypography.style=bdsTypographyCss();export{BdsTypography as bds_typography};
|
|
1
|
+
var __assign=this&&this.__assign||function(){__assign=Object.assign||function(t){for(var e,r=1,a=arguments.length;r<a;r++){e=arguments[r];for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i))t[i]=e[i]}return t};return __assign.apply(this,arguments)};var __awaiter=this&&this.__awaiter||function(t,e,r,a){function i(t){return t instanceof r?t:new r((function(e){e(t)}))}return new(r||(r=Promise))((function(r,o){function n(t){try{s(a.next(t))}catch(t){o(t)}}function h(t){try{s(a["throw"](t))}catch(t){o(t)}}function s(t){t.done?r(t.value):i(t.value).then(n,h)}s((a=a.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var r={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},a,i,o,n=Object.create((typeof Iterator==="function"?Iterator:Object).prototype);return n.next=h(0),n["throw"]=h(1),n["return"]=h(2),typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function h(t){return function(e){return s([t,e])}}function s(h){if(a)throw new TypeError("Generator is already executing.");while(n&&(n=0,h[0]&&(r=0)),r)try{if(a=1,i&&(o=h[0]&2?i["return"]:h[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,h[1])).done)return o;if(i=0,o)h=[h[0]&2,o.value];switch(h[0]){case 0:case 1:o=h;break;case 4:r.label++;return{value:h[1],done:false};case 5:r.label++;i=h[1];h=[0];continue;case 7:h=r.ops.pop();r.trys.pop();continue;default:if(!(o=r.trys,o=o.length>0&&o[o.length-1])&&(h[0]===6||h[0]===2)){r=0;continue}if(h[0]===3&&(!o||h[1]>o[0]&&h[1]<o[3])){r.label=h[1];break}if(h[0]===6&&r.label<o[1]){r.label=o[1];o=h;break}if(o&&r.label<o[2]){r.label=o[2];r.ops.push(h);break}if(o[2])r.ops.pop();r.trys.pop();continue}h=e.call(t,r)}catch(t){h=[6,t];i=0}finally{a=o=0}if(h[0]&5)throw h[1];return{value:h[0]?h[1]:void 0,done:true}}};import{r as registerInstance,h,a as Host,g as getElement}from"./index-DgFiTd6X.js";import{a as STATES,i as inheritAriaAttributes}from"./attributes-B9wshZ_4.js";var ALIGNMENT={START:"start"};var SIZES={XS:"xs",S:"sm",M:"md",L:"lg",XL:"xl"};var VARIANT_TYPOGRAPHY={DISPLAY:"display",LINK:"link"};var TAG_ELEMENT={P:"p",A:"a"};var FILENAME="download";var VARIANT_CONFIG={link:{states:[STATES.DISABLED],size:[SIZES.S,SIZES.M]},label:{states:[STATES.DISABLED],isRequired:true,canUseTooltip:true},heading:{canUseTooltip:true},subheading:{canUseTooltip:true},helper:{states:[STATES.ERROR]},display:{size:[SIZES.XS,SIZES.S,SIZES.M,SIZES.L,SIZES.XL]}};var getAttributesByTag=function(t,e){var r={a:{href:t.state!==STATES.DISABLED?t.sanitizedHref:null,target:t.target,download:t.isDownloadable?t.filename:null,rel:t.target==="_blank"?"noopener noreferrer":undefined},label:{htmlFor:t.htmlFor}};return r[e]||{}};var bdsTypographyCss=function(){return".bds-typography{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:var(--boreal-typography-font-family-primary);font-weight:var(--boreal-typography-font-weight-regular)}.bds-typography__required-indicator{color:var(--boreal-icon-danger-base);font-weight:var(--boreal-typography-font-weight-regular)}.bds-typography__info-icon{color:var(--boreal-icon-default-light)}.bds-typography--heading,.bds-typography--subheading{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-3xs)}.bds-typography--label{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-3xs)}.bds-typography--display{display:block}.bds-typography--caption,.bds-typography--helper,.bds-typography--link{display:inline-block}.bds-typography--caption{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-default-light)}.bds-typography--helper{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-sm);color:var(--boreal-text-default-light)}.bds-typography--link{font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-primary-base);text-decoration:none}.bds-typography--link:hover{text-decoration:underline}.bds-typography--link:visited{color:var(--boreal-text-primary-base)}.bds-typography--link:active{color:var(--boreal-text-primary-dark)}.bds-typography--link.bds-typography--size-sm{font-size:var(--boreal-typography-font-size-xs)}.bds-typography--link.bds-typography--size-md{font-size:var(--boreal-typography-font-size-sm)}.bds-typography--code{font-family:var(--boreal-typography-font-family-secondary);font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default);line-height:var(--boreal-typography-line-height-md);overflow-wrap:break-word;background-color:var(--boreal-bg-neutral);padding:var(--boreal-spacing-3xs) var(--boreal-spacing-xs);border-radius:var(--boreal-radius-xs);display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone}.bds-typography--label{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-default-darker)}.bds-typography--display{font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default)}.bds-typography--display.bds-typography--size-sm{font-size:var(--boreal-typography-font-size-xl);line-height:var(--boreal-typography-line-height-xl)}.bds-typography--display.bds-typography--size-md{font-size:var(--boreal-typography-font-size-2xl);line-height:var(--boreal-typography-line-height-2xl)}.bds-typography--display.bds-typography--size-lg{font-size:var(--boreal-typography-font-size-3xl);line-height:var(--boreal-typography-line-height-3xl);font-weight:var(--boreal-typography-font-weight-light)}.bds-typography--display.bds-typography--size-xl{font-size:var(--boreal-typography-font-size-4xl);line-height:var(--boreal-typography-line-height-4xl);font-weight:var(--boreal-typography-font-weight-light)}.bds-typography--heading{font-size:var(--boreal-typography-font-size-lg);line-height:var(--boreal-typography-line-height-lg);font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default)}.bds-typography h1.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-4xl);line-height:var(--boreal-typography-line-height-4xl)}.bds-typography h2.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-3xl);line-height:var(--boreal-typography-line-height-3xl)}.bds-typography h3.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-2xl);line-height:var(--boreal-typography-line-height-2xl)}.bds-typography h4.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-xl);line-height:var(--boreal-typography-line-height-xl)}.bds-typography h5.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-lg);line-height:var(--boreal-typography-line-height-lg)}.bds-typography h6.bds-typography--heading{font-size:var(--boreal-typography-font-size-md);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md)}.bds-typography--subheading{font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md);font-weight:var(--boreal-typography-font-weight-semibold)}.bds-typography--align-start{text-align:start}.bds-typography--align-center{text-align:center}.bds-typography--align-end{text-align:end}.bds-typography--align-inherit{text-align:inherit}.bds-typography--error{color:var(--boreal-text-danger-base)}.bds-typography--disabled{color:var(--boreal-text-disabled);pointer-events:none;cursor:not-allowed}.bds-typography--disabled .bds-typography__required-indicator{color:var(--boreal-text-danger-light)}.bds-typography--ellipsis{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.bds-typography--ellipsis-multiline{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;width:100%}"};var BdsTypography=function(){function t(t){registerInstance(this,t);this.inheritedAttributes={};this.variant=VARIANT_TYPOGRAPHY.DISPLAY;this.size=SIZES.M;this.state=STATES.DEFAULT;this.customClass="";this.element=TAG_ELEMENT.P;this.align=ALIGNMENT.START;this.ellipsis=false;this.maxLines=1;this.tooltipText="";this.isRequired=false;this.htmlFor=undefined;this.href=null;this.target=null;this.isDownloadable=false;this.filename=FILENAME;this.sanitizedHref=""}t.prototype.updateSanitizedHref=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:if(!(this.getTagName==="a"&&this.href!==null))return[3,2];return[4,import("./index-noyWJ11s.js").then((function(t){return t.i}))];case 1:t=e.sent().sanitizeUrl;this.sanitizedHref=t(this.href);return[3,3];case 2:this.sanitizedHref="";e.label=3;case 3:return[2]}}))}))};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:if(!(this.getTagName===TAG_ELEMENT.A&&this.href!==null))return[3,2];return[4,this.updateSanitizedHref()];case 1:t.sent();t.label=2;case 2:this.inheritedAttributes=__assign({},inheritAriaAttributes(this.el));return[2]}}))}))};Object.defineProperty(t.prototype,"getTagName",{get:function(){if(this.variant===VARIANT_TYPOGRAPHY.LINK)return TAG_ELEMENT.A;return this.element.toLowerCase()},enumerable:false,configurable:true});t.prototype.getVariantConfig=function(){var t;return(t=VARIANT_CONFIG[this.variant])!==null&&t!==void 0?t:{}};t.prototype.getAccessibilityTags=function(){var t=this.getVariantConfig().isRequired,e=t===void 0?null:t;var r=["a","label"].includes(this.getTagName);return{"aria-required":this.isRequired&&e,"aria-disabled":this.state===STATES.DISABLED&&r}};t.prototype.getVariantStateStyles=function(){var t;var e=this.getVariantConfig();return t={},t["bds-typography--".concat(this.variant)]=true,t["bds-typography--align-".concat(this.align)]=true,t["bds-typography--".concat(this.state)]=!!((e===null||e===void 0?void 0:e.states)&&(e===null||e===void 0?void 0:e.states.includes(this.state))),t["bds-typography--size-".concat(this.size)]=!!((e===null||e===void 0?void 0:e.size)&&(e===null||e===void 0?void 0:e.size.includes(this.size))),t["bds-typography--required"]=!!((e===null||e===void 0?void 0:e.isRequired)&&this.isRequired),t["bds-typography--ellipsis"]=this.ellipsis&&this.maxLines<=1,t["bds-typography--ellipsis-multiline"]=this.ellipsis&&this.maxLines>1,t[this.customClass]=this.customClass!=="",t};t.prototype.render=function(){var t=this.getTagName;var e=__assign(__assign(__assign({},getAttributesByTag(this,t)),this.inheritedAttributes),this.getAccessibilityTags());var r=this.getVariantStateStyles();var a=this.getVariantConfig(),i=a.canUseTooltip,o=i===void 0?null:i,n=a.isRequired,s=n===void 0?null:n;return h(Host,{key:"e816237127a0bec2f223c3c11c405830b3bc530f",class:"bds-typography"},h(t,__assign({key:"5428ad8d55990feae5190e19c6372445f76d504b",class:r,style:{webkitLineClamp:this.maxLines}},e),h("slot",{key:"5f5b95afd7799c988607174d45dfdffe018438a8"}),this.isRequired&&s&&h("em",{key:"5d57fc3a0aed14887df9fb03f2b279204e99861c",class:"bds-typography__required-indicator","aria-hidden":"true"},"*"),this.tooltipText&&o&&h("em",{key:"9b89f3e48de66ebcd27755d9ec19ef261b73250e",class:"bds-typography__info-icon bds-icon-info-circle"})))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{href:[{updateSanitizedHref:0}]}},enumerable:false,configurable:true});return t}();BdsTypography.style=bdsTypographyCss();export{BdsTypography as bds_typography};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var __awaiter=this&&this.__awaiter||function(e,t,n,r){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function a(e){try{c(r.next(e))}catch(e){o(e)}}function s(e){try{c(r["throw"](e))}catch(e){o(e)}}function c(e){e.done?n(e.value):i(e.value).then(a,s)}c((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,a=Object.create((typeof Iterator==="function"?Iterator:Object).prototype);return a.next=s(0),a["throw"]=s(1),a["return"]=s(2),typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(t){return c([e,t])}}function c(s){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(n=0)),n)try{if(r=1,i&&(o=s[0]&2?i["return"]:s[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,s[1])).done)return o;if(i=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;i=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){n.label=s[1];break}if(s[0]===6&&n.label<o[1]){n.label=o[1];o=s;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(s);break}if(o[2])n.ops.pop();n.trys.pop();continue}s=t.call(e,n)}catch(e){s=[6,e];i=0}finally{r=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{p as promiseResolve,H,b as bootstrapLazy}from"./index-DgFiTd6X.js";export{s as setNonce}from"./index-DgFiTd6X.js";import{g as globalScripts}from"./app-globals-DQuL1Twl.js";var patchBrowser=function(){{patchCloneNodeFix(H.prototype)}var e=import.meta.url;var t={};if(e!==""){t.resourcesUrl=new URL(".",e).href}return promiseResolve(t)};var patchCloneNodeFix=function(e){var t=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return t.call(this,e)}var n=t.call(this,false);var r=this.childNodes;if(e){for(var i=0;i<r.length;i++){if(r[i].nodeType!==2){n.appendChild(r[i].cloneNode(true))}}}return n}};patchBrowser().then((function(e){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,globalScripts()];case 1:t.sent();return[2,bootstrapLazy([["bds-banner",[[260,"bds-banner",{idComponent:[1,"id-component"],variant:[1],enableClose:[4,"enable-close"],isClosing:[32],isOpen:[32],closeBanner:[64]}]]],["bds-typography",[[260,"bds-typography",{variant:[513],size:[513],state:[513],customClass:[1,"custom-class"],element:[1],align:[1],ellipsis:[4],maxLines:[2,"max-lines"],tooltipText:[1,"tooltip-text"],isRequired:[516,"is-required"],htmlFor:[1,"html-for"],href:[1],target:[1],isDownloadable:[4,"is-downloadable"],filename:[1],sanitizedHref:[32]},null,{href:[{updateSanitizedHref:0}]}]]]
|
|
1
|
+
var __awaiter=this&&this.__awaiter||function(e,t,n,r){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function a(e){try{c(r.next(e))}catch(e){o(e)}}function s(e){try{c(r["throw"](e))}catch(e){o(e)}}function c(e){e.done?n(e.value):i(e.value).then(a,s)}c((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,a=Object.create((typeof Iterator==="function"?Iterator:Object).prototype);return a.next=s(0),a["throw"]=s(1),a["return"]=s(2),typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(t){return c([e,t])}}function c(s){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(n=0)),n)try{if(r=1,i&&(o=s[0]&2?i["return"]:s[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,s[1])).done)return o;if(i=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;i=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){n.label=s[1];break}if(s[0]===6&&n.label<o[1]){n.label=o[1];o=s;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(s);break}if(o[2])n.ops.pop();n.trys.pop();continue}s=t.call(e,n)}catch(e){s=[6,e];i=0}finally{r=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{p as promiseResolve,H,b as bootstrapLazy}from"./index-DgFiTd6X.js";export{s as setNonce}from"./index-DgFiTd6X.js";import{g as globalScripts}from"./app-globals-DQuL1Twl.js";var patchBrowser=function(){{patchCloneNodeFix(H.prototype)}var e=import.meta.url;var t={};if(e!==""){t.resourcesUrl=new URL(".",e).href}return promiseResolve(t)};var patchCloneNodeFix=function(e){var t=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return t.call(this,e)}var n=t.call(this,false);var r=this.childNodes;if(e){for(var i=0;i<r.length;i++){if(r[i].nodeType!==2){n.appendChild(r[i].cloneNode(true))}}}return n}};patchBrowser().then((function(e){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,globalScripts()];case 1:t.sent();return[2,bootstrapLazy([["bds-banner",[[260,"bds-banner",{idComponent:[1,"id-component"],variant:[1],enableClose:[4,"enable-close"],isClosing:[32],isOpen:[32],closeBanner:[64]}]]],["bds-typography",[[260,"bds-typography",{variant:[513],size:[513],state:[513],customClass:[1,"custom-class"],element:[1],align:[1],ellipsis:[4],maxLines:[2,"max-lines"],tooltipText:[1,"tooltip-text"],isRequired:[516,"is-required"],htmlFor:[1,"html-for"],href:[1],target:[1],isDownloadable:[4,"is-downloadable"],filename:[1],sanitizedHref:[32]},null,{href:[{updateSanitizedHref:0}]}]]]],e)]}}))}))}));
|
package/dist/esm-es5/loader.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var __awaiter=this&&this.__awaiter||function(e,t,n,i){function r(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function a(e){try{u(i.next(e))}catch(e){o(e)}}function s(e){try{u(i["throw"](e))}catch(e){o(e)}}function u(e){e.done?n(e.value):r(e.value).then(a,s)}u((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,r,o,a=Object.create((typeof Iterator==="function"?Iterator:Object).prototype);return a.next=s(0),a["throw"]=s(1),a["return"]=s(2),typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(t){return u([e,t])}}function u(s){if(i)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(n=0)),n)try{if(i=1,r&&(o=s[0]&2?r["return"]:s[0]?r["throw"]||((o=r["return"])&&o.call(r),0):r.next)&&!(o=o.call(r,s[1])).done)return o;if(r=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;r=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){n.label=s[1];break}if(s[0]===6&&n.label<o[1]){n.label=o[1];o=s;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(s);break}if(o[2])n.ops.pop();n.trys.pop();continue}s=t.call(e,n)}catch(e){s=[6,e];r=0}finally{i=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{b as bootstrapLazy}from"./index-DgFiTd6X.js";export{s as setNonce}from"./index-DgFiTd6X.js";import{g as globalScripts}from"./app-globals-DQuL1Twl.js";var defineCustomElements=function(e,t){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:if(typeof window==="undefined")return[2,undefined];return[4,globalScripts()];case 1:e.sent();return[2,bootstrapLazy([["bds-banner",[[260,"bds-banner",{idComponent:[1,"id-component"],variant:[1],enableClose:[4,"enable-close"],isClosing:[32],isOpen:[32],closeBanner:[64]}]]],["bds-typography",[[260,"bds-typography",{variant:[513],size:[513],state:[513],customClass:[1,"custom-class"],element:[1],align:[1],ellipsis:[4],maxLines:[2,"max-lines"],tooltipText:[1,"tooltip-text"],isRequired:[516,"is-required"],htmlFor:[1,"html-for"],href:[1],target:[1],isDownloadable:[4,"is-downloadable"],filename:[1],sanitizedHref:[32]},null,{href:[{updateSanitizedHref:0}]}]]]
|
|
1
|
+
var __awaiter=this&&this.__awaiter||function(e,t,n,i){function r(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function a(e){try{u(i.next(e))}catch(e){o(e)}}function s(e){try{u(i["throw"](e))}catch(e){o(e)}}function u(e){e.done?n(e.value):r(e.value).then(a,s)}u((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,r,o,a=Object.create((typeof Iterator==="function"?Iterator:Object).prototype);return a.next=s(0),a["throw"]=s(1),a["return"]=s(2),typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(t){return u([e,t])}}function u(s){if(i)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(n=0)),n)try{if(i=1,r&&(o=s[0]&2?r["return"]:s[0]?r["throw"]||((o=r["return"])&&o.call(r),0):r.next)&&!(o=o.call(r,s[1])).done)return o;if(r=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;r=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){n.label=s[1];break}if(s[0]===6&&n.label<o[1]){n.label=o[1];o=s;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(s);break}if(o[2])n.ops.pop();n.trys.pop();continue}s=t.call(e,n)}catch(e){s=[6,e];r=0}finally{i=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{b as bootstrapLazy}from"./index-DgFiTd6X.js";export{s as setNonce}from"./index-DgFiTd6X.js";import{g as globalScripts}from"./app-globals-DQuL1Twl.js";var defineCustomElements=function(e,t){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:if(typeof window==="undefined")return[2,undefined];return[4,globalScripts()];case 1:e.sent();return[2,bootstrapLazy([["bds-banner",[[260,"bds-banner",{idComponent:[1,"id-component"],variant:[1],enableClose:[4,"enable-close"],isClosing:[32],isOpen:[32],closeBanner:[64]}]]],["bds-typography",[[260,"bds-typography",{variant:[513],size:[513],state:[513],customClass:[1,"custom-class"],element:[1],align:[1],ellipsis:[4],maxLines:[2,"max-lines"],tooltipText:[1,"tooltip-text"],isRequired:[516,"is-required"],htmlFor:[1,"html-for"],href:[1],target:[1],isDownloadable:[4,"is-downloadable"],filename:[1],sanitizedHref:[32]},null,{href:[{updateSanitizedHref:0}]}]]]],t)]}}))}))};export{defineCustomElements};
|
|
@@ -167,23 +167,6 @@ export namespace Components {
|
|
|
167
167
|
*/
|
|
168
168
|
"variant": ITypography['variant'];
|
|
169
169
|
}
|
|
170
|
-
interface MyComponent {
|
|
171
|
-
/**
|
|
172
|
-
* The first name
|
|
173
|
-
* @default ''
|
|
174
|
-
*/
|
|
175
|
-
"first": string;
|
|
176
|
-
/**
|
|
177
|
-
* The last name
|
|
178
|
-
* @default ''
|
|
179
|
-
*/
|
|
180
|
-
"last": string;
|
|
181
|
-
/**
|
|
182
|
-
* The middle name
|
|
183
|
-
* @default ''
|
|
184
|
-
*/
|
|
185
|
-
"middle": string;
|
|
186
|
-
}
|
|
187
170
|
}
|
|
188
171
|
export interface BdsBannerCustomEvent<T> extends CustomEvent<T> {
|
|
189
172
|
detail: T;
|
|
@@ -272,16 +255,9 @@ declare global {
|
|
|
272
255
|
prototype: HTMLBdsTypographyElement;
|
|
273
256
|
new (): HTMLBdsTypographyElement;
|
|
274
257
|
};
|
|
275
|
-
interface HTMLMyComponentElement extends Components.MyComponent, HTMLStencilElement {
|
|
276
|
-
}
|
|
277
|
-
var HTMLMyComponentElement: {
|
|
278
|
-
prototype: HTMLMyComponentElement;
|
|
279
|
-
new (): HTMLMyComponentElement;
|
|
280
|
-
};
|
|
281
258
|
interface HTMLElementTagNameMap {
|
|
282
259
|
"bds-banner": HTMLBdsBannerElement;
|
|
283
260
|
"bds-typography": HTMLBdsTypographyElement;
|
|
284
|
-
"my-component": HTMLMyComponentElement;
|
|
285
261
|
}
|
|
286
262
|
}
|
|
287
263
|
declare namespace LocalJSX {
|
|
@@ -442,23 +418,6 @@ declare namespace LocalJSX {
|
|
|
442
418
|
*/
|
|
443
419
|
"variant"?: ITypography['variant'];
|
|
444
420
|
}
|
|
445
|
-
interface MyComponent {
|
|
446
|
-
/**
|
|
447
|
-
* The first name
|
|
448
|
-
* @default ''
|
|
449
|
-
*/
|
|
450
|
-
"first"?: string;
|
|
451
|
-
/**
|
|
452
|
-
* The last name
|
|
453
|
-
* @default ''
|
|
454
|
-
*/
|
|
455
|
-
"last"?: string;
|
|
456
|
-
/**
|
|
457
|
-
* The middle name
|
|
458
|
-
* @default ''
|
|
459
|
-
*/
|
|
460
|
-
"middle"?: string;
|
|
461
|
-
}
|
|
462
421
|
|
|
463
422
|
interface BdsBannerAttributes {
|
|
464
423
|
"idComponent": string;
|
|
@@ -482,16 +441,10 @@ declare namespace LocalJSX {
|
|
|
482
441
|
"isDownloadable": ITypography['isDownloadable'];
|
|
483
442
|
"filename": ITypography['filename'];
|
|
484
443
|
}
|
|
485
|
-
interface MyComponentAttributes {
|
|
486
|
-
"first": string;
|
|
487
|
-
"middle": string;
|
|
488
|
-
"last": string;
|
|
489
|
-
}
|
|
490
444
|
|
|
491
445
|
interface IntrinsicElements {
|
|
492
446
|
"bds-banner": Omit<BdsBanner, keyof BdsBannerAttributes> & { [K in keyof BdsBanner & keyof BdsBannerAttributes]?: BdsBanner[K] } & { [K in keyof BdsBanner & keyof BdsBannerAttributes as `attr:${K}`]?: BdsBannerAttributes[K] } & { [K in keyof BdsBanner & keyof BdsBannerAttributes as `prop:${K}`]?: BdsBanner[K] };
|
|
493
447
|
"bds-typography": Omit<BdsTypography, keyof BdsTypographyAttributes> & { [K in keyof BdsTypography & keyof BdsTypographyAttributes]?: BdsTypography[K] } & { [K in keyof BdsTypography & keyof BdsTypographyAttributes as `attr:${K}`]?: BdsTypographyAttributes[K] } & { [K in keyof BdsTypography & keyof BdsTypographyAttributes as `prop:${K}`]?: BdsTypography[K] };
|
|
494
|
-
"my-component": Omit<MyComponent, keyof MyComponentAttributes> & { [K in keyof MyComponent & keyof MyComponentAttributes]?: MyComponent[K] } & { [K in keyof MyComponent & keyof MyComponentAttributes as `attr:${K}`]?: MyComponentAttributes[K] } & { [K in keyof MyComponent & keyof MyComponentAttributes as `prop:${K}`]?: MyComponent[K] };
|
|
495
448
|
}
|
|
496
449
|
}
|
|
497
450
|
export { LocalJSX as JSX };
|
|
@@ -559,7 +512,6 @@ declare module "@stencil/core" {
|
|
|
559
512
|
* @default '' - Default tooltipText value
|
|
560
513
|
*/
|
|
561
514
|
"bds-typography": LocalJSX.IntrinsicElements["bds-typography"] & JSXBase.HTMLAttributes<HTMLBdsTypographyElement>;
|
|
562
|
-
"my-component": LocalJSX.IntrinsicElements["my-component"] & JSXBase.HTMLAttributes<HTMLMyComponentElement>;
|
|
563
515
|
}
|
|
564
516
|
}
|
|
565
517
|
}
|
package/package.json
CHANGED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { Components, JSX } from "../dist/types/components";
|
|
2
|
-
|
|
3
|
-
interface MyComponent extends Components.MyComponent, HTMLElement {}
|
|
4
|
-
export const MyComponent: {
|
|
5
|
-
prototype: MyComponent;
|
|
6
|
-
new (): MyComponent;
|
|
7
|
-
};
|
|
8
|
-
/**
|
|
9
|
-
* Used to define this component and all nested components recursively.
|
|
10
|
-
*/
|
|
11
|
-
export const defineCustomElement: () => void;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{p as t,H as e,h as s,t as o}from"./index.js";const n=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.first="",this.middle="",this.last=""}render(){return s("div",{key:"2f3775c7b3d8475826a01101110bd2876a57f2cb"}," Hello, World! I'm Stencil 'Don't call me a framework' JS")}static get style(){return":host{display:block}"}},[0,"my-component",{first:[1],middle:[1],last:[1]}]),m=n,c=function(){"undefined"!=typeof customElements&&["my-component"].forEach((t=>{"my-component"===t&&(customElements.get(o(t))||customElements.define(o(t),n))}))};export{m as MyComponent,c as defineCustomElement}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
System.register(["./p-BQdH0ijK.system.js"],(function(t){"use strict";var n,e;return{setters:[function(t){n=t.r;e=t.h}],execute:function(){var i=function(){return":host{display:block}"};var r=t("my_component",function(){function t(t){n(this,t);this.first="";this.middle="";this.last=""}t.prototype.render=function(){return e("div",{key:"2f3775c7b3d8475826a01101110bd2876a57f2cb"}," Hello, World! I'm Stencil 'Don't call me a framework' JS")};return t}());r.style=i()}}}));
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as o,h as t}from"./p-DgFiTd6X.js";const r=class{constructor(t){o(this,t),this.first="",this.middle="",this.last=""}render(){return t("div",{key:"2f3775c7b3d8475826a01101110bd2876a57f2cb"}," Hello, World! I'm Stencil 'Don't call me a framework' JS")}};r.style=":host{display:block}";export{r as my_component}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var index = require('./index-Cdb66Tqj.js');
|
|
4
|
-
|
|
5
|
-
const myComponentCss = () => `:host{display:block}`;
|
|
6
|
-
|
|
7
|
-
const MyComponent = class {
|
|
8
|
-
constructor(hostRef) {
|
|
9
|
-
index.registerInstance(this, hostRef);
|
|
10
|
-
/**
|
|
11
|
-
* The first name
|
|
12
|
-
*/
|
|
13
|
-
this.first = '';
|
|
14
|
-
/**
|
|
15
|
-
* The middle name
|
|
16
|
-
*/
|
|
17
|
-
this.middle = '';
|
|
18
|
-
/**
|
|
19
|
-
* The last name
|
|
20
|
-
*/
|
|
21
|
-
this.last = '';
|
|
22
|
-
}
|
|
23
|
-
render() {
|
|
24
|
-
return index.h("div", { key: '2f3775c7b3d8475826a01101110bd2876a57f2cb' }, " Hello, World! I'm Stencil 'Don't call me a framework' JS");
|
|
25
|
-
}
|
|
26
|
-
};
|
|
27
|
-
MyComponent.style = myComponentCss();
|
|
28
|
-
|
|
29
|
-
exports.my_component = MyComponent;
|
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
import { h } from "@stencil/core";
|
|
2
|
-
export class MyComponent {
|
|
3
|
-
constructor() {
|
|
4
|
-
/**
|
|
5
|
-
* The first name
|
|
6
|
-
*/
|
|
7
|
-
this.first = '';
|
|
8
|
-
/**
|
|
9
|
-
* The middle name
|
|
10
|
-
*/
|
|
11
|
-
this.middle = '';
|
|
12
|
-
/**
|
|
13
|
-
* The last name
|
|
14
|
-
*/
|
|
15
|
-
this.last = '';
|
|
16
|
-
}
|
|
17
|
-
render() {
|
|
18
|
-
return h("div", { key: '2f3775c7b3d8475826a01101110bd2876a57f2cb' }, " Hello, World! I'm Stencil 'Don't call me a framework' JS");
|
|
19
|
-
}
|
|
20
|
-
static get is() { return "my-component"; }
|
|
21
|
-
static get originalStyleUrls() {
|
|
22
|
-
return {
|
|
23
|
-
"$": ["my-component.css"]
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
static get styleUrls() {
|
|
27
|
-
return {
|
|
28
|
-
"$": ["my-component.css"]
|
|
29
|
-
};
|
|
30
|
-
}
|
|
31
|
-
static get properties() {
|
|
32
|
-
return {
|
|
33
|
-
"first": {
|
|
34
|
-
"type": "string",
|
|
35
|
-
"mutable": false,
|
|
36
|
-
"complexType": {
|
|
37
|
-
"original": "string",
|
|
38
|
-
"resolved": "string",
|
|
39
|
-
"references": {}
|
|
40
|
-
},
|
|
41
|
-
"required": false,
|
|
42
|
-
"optional": false,
|
|
43
|
-
"docs": {
|
|
44
|
-
"tags": [],
|
|
45
|
-
"text": "The first name"
|
|
46
|
-
},
|
|
47
|
-
"getter": false,
|
|
48
|
-
"setter": false,
|
|
49
|
-
"reflect": false,
|
|
50
|
-
"attribute": "first",
|
|
51
|
-
"defaultValue": "''"
|
|
52
|
-
},
|
|
53
|
-
"middle": {
|
|
54
|
-
"type": "string",
|
|
55
|
-
"mutable": false,
|
|
56
|
-
"complexType": {
|
|
57
|
-
"original": "string",
|
|
58
|
-
"resolved": "string",
|
|
59
|
-
"references": {}
|
|
60
|
-
},
|
|
61
|
-
"required": false,
|
|
62
|
-
"optional": false,
|
|
63
|
-
"docs": {
|
|
64
|
-
"tags": [],
|
|
65
|
-
"text": "The middle name"
|
|
66
|
-
},
|
|
67
|
-
"getter": false,
|
|
68
|
-
"setter": false,
|
|
69
|
-
"reflect": false,
|
|
70
|
-
"attribute": "middle",
|
|
71
|
-
"defaultValue": "''"
|
|
72
|
-
},
|
|
73
|
-
"last": {
|
|
74
|
-
"type": "string",
|
|
75
|
-
"mutable": false,
|
|
76
|
-
"complexType": {
|
|
77
|
-
"original": "string",
|
|
78
|
-
"resolved": "string",
|
|
79
|
-
"references": {}
|
|
80
|
-
},
|
|
81
|
-
"required": false,
|
|
82
|
-
"optional": false,
|
|
83
|
-
"docs": {
|
|
84
|
-
"tags": [],
|
|
85
|
-
"text": "The last name"
|
|
86
|
-
},
|
|
87
|
-
"getter": false,
|
|
88
|
-
"setter": false,
|
|
89
|
-
"reflect": false,
|
|
90
|
-
"attribute": "last",
|
|
91
|
-
"defaultValue": "''"
|
|
92
|
-
}
|
|
93
|
-
};
|
|
94
|
-
}
|
|
95
|
-
}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h } from './index-DgFiTd6X.js';
|
|
2
|
-
|
|
3
|
-
const myComponentCss = () => `:host{display:block}`;
|
|
4
|
-
|
|
5
|
-
const MyComponent = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
/**
|
|
9
|
-
* The first name
|
|
10
|
-
*/
|
|
11
|
-
this.first = '';
|
|
12
|
-
/**
|
|
13
|
-
* The middle name
|
|
14
|
-
*/
|
|
15
|
-
this.middle = '';
|
|
16
|
-
/**
|
|
17
|
-
* The last name
|
|
18
|
-
*/
|
|
19
|
-
this.last = '';
|
|
20
|
-
}
|
|
21
|
-
render() {
|
|
22
|
-
return h("div", { key: '2f3775c7b3d8475826a01101110bd2876a57f2cb' }, " Hello, World! I'm Stencil 'Don't call me a framework' JS");
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
MyComponent.style = myComponentCss();
|
|
26
|
-
|
|
27
|
-
export { MyComponent as my_component };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as registerInstance,h}from"./index-DgFiTd6X.js";var myComponentCss=function(){return":host{display:block}"};var MyComponent=function(){function n(n){registerInstance(this,n);this.first="";this.middle="";this.last=""}n.prototype.render=function(){return h("div",{key:"2f3775c7b3d8475826a01101110bd2876a57f2cb"}," Hello, World! I'm Stencil 'Don't call me a framework' JS")};return n}();MyComponent.style=myComponentCss();export{MyComponent as my_component};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
export declare class MyComponent {
|
|
2
|
-
/**
|
|
3
|
-
* The first name
|
|
4
|
-
*/
|
|
5
|
-
readonly first: string;
|
|
6
|
-
/**
|
|
7
|
-
* The middle name
|
|
8
|
-
*/
|
|
9
|
-
readonly middle: string;
|
|
10
|
-
/**
|
|
11
|
-
* The last name
|
|
12
|
-
*/
|
|
13
|
-
readonly last: string;
|
|
14
|
-
render(): any;
|
|
15
|
-
}
|
|
16
|
-
//# sourceMappingURL=my-component.d.ts.map
|
package/readme.md
DELETED
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
[](https://stenciljs.com)
|
|
2
|
-
|
|
3
|
-
# Stencil Component Starter
|
|
4
|
-
|
|
5
|
-
> This is a starter project for building a standalone Web Components using Stencil.
|
|
6
|
-
|
|
7
|
-
Stencil is a compiler for building fast web apps using Web Components.
|
|
8
|
-
|
|
9
|
-
Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than runtime tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements specification.
|
|
10
|
-
|
|
11
|
-
Stencil components are just Web Components, so they work in any major framework or with no framework at all.
|
|
12
|
-
|
|
13
|
-
## Getting Started
|
|
14
|
-
|
|
15
|
-
To start building a new web component using Stencil, clone this repo to a new directory:
|
|
16
|
-
|
|
17
|
-
```bash
|
|
18
|
-
git clone https://github.com/stenciljs/component-starter.git my-component
|
|
19
|
-
cd my-component
|
|
20
|
-
git remote rm origin
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
and run:
|
|
24
|
-
|
|
25
|
-
```bash
|
|
26
|
-
npm install
|
|
27
|
-
npm start
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
To build the component for production, run:
|
|
31
|
-
|
|
32
|
-
```bash
|
|
33
|
-
npm run build
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
To run the unit tests for the components, run:
|
|
37
|
-
|
|
38
|
-
```bash
|
|
39
|
-
npm test
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
|
|
43
|
-
|
|
44
|
-
## Naming Components
|
|
45
|
-
|
|
46
|
-
When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
|
|
47
|
-
|
|
48
|
-
Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the [Ionic-generated](https://ionicframework.com/) web components use the prefix `ion`.
|
|
49
|
-
|
|
50
|
-
## Using this component
|
|
51
|
-
|
|
52
|
-
There are two strategies we recommend for using web components built with Stencil.
|
|
53
|
-
|
|
54
|
-
The first step for all two of these strategies is to [publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages).
|
|
55
|
-
|
|
56
|
-
You can read more about these different approaches in the [Stencil docs](https://stenciljs.com/docs/publishing).
|
|
57
|
-
|
|
58
|
-
### Lazy Loading
|
|
59
|
-
|
|
60
|
-
If your Stencil project is built with the [`dist`](https://stenciljs.com/docs/distribution) output target, you can import a small bootstrap script that registers all components and allows you to load individual component scripts lazily.
|
|
61
|
-
|
|
62
|
-
For example, given your Stencil project namespace is called `my-design-system`, to use `my-component` on any website, inject this into your HTML:
|
|
63
|
-
|
|
64
|
-
```html
|
|
65
|
-
<script type="module" src="https://unpkg.com/my-design-system"></script>
|
|
66
|
-
<!--
|
|
67
|
-
To avoid unpkg.com redirects to the actual file, you can also directly import:
|
|
68
|
-
https://unpkg.com/foobar-design-system@0.0.1/dist/foobar-design-system/foobar-design-system.esm.js
|
|
69
|
-
-->
|
|
70
|
-
<my-component first="Stencil" middle="'Don't call me a framework'" last="JS"></my-component>
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
This will only load the necessary scripts needed to render `<my-component />`. Once more components of this package are used, they will automatically be loaded lazily.
|
|
74
|
-
|
|
75
|
-
You can also import the script as part of your `node_modules` in your applications entry file:
|
|
76
|
-
|
|
77
|
-
```tsx
|
|
78
|
-
import 'foobar-design-system/dist/foobar-design-system/foobar-design-system.esm.js';
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-y6v26a?file=src%2Fmain.tsx).
|
|
82
|
-
|
|
83
|
-
### Standalone
|
|
84
|
-
|
|
85
|
-
If you are using a Stencil component library with `dist-custom-elements`, we recommend importing Stencil components individually in those files where they are needed.
|
|
86
|
-
|
|
87
|
-
To export Stencil components as standalone components make sure you have the [`dist-custom-elements`](https://stenciljs.com/docs/custom-elements) output target defined in your `stencil.config.ts`.
|
|
88
|
-
|
|
89
|
-
For example, given you'd like to use `<my-component />` as part of a React component, you can import the component directly via:
|
|
90
|
-
|
|
91
|
-
```tsx
|
|
92
|
-
import 'foobar-design-system/my-component';
|
|
93
|
-
|
|
94
|
-
function App() {
|
|
95
|
-
return (
|
|
96
|
-
<>
|
|
97
|
-
<div>
|
|
98
|
-
<my-component
|
|
99
|
-
first="Stencil"
|
|
100
|
-
middle="'Don't call me a framework'"
|
|
101
|
-
last="JS"
|
|
102
|
-
></my-component>
|
|
103
|
-
</div>
|
|
104
|
-
</>
|
|
105
|
-
);
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
export default App;
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-b6zuds?file=src%2FApp.tsx).
|