@aurodesignsystem-dev/auro-hyperlink 0.0.0-pr318.0 → 0.0.0-pr322.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 +38 -58
- package/custom-elements.json +1833 -1513
- package/demo/api.md +28 -29
- package/demo/auro-hyperlink.min.js +47 -60
- package/demo/index.md +0 -12
- package/dist/{auro-hyperlink-BbOKgPQQ.js → auro-hyperlink-isNf5eLk.js} +8 -8
- package/dist/index.d.ts +8 -8
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +6 -6
package/demo/api.md
CHANGED
|
@@ -12,35 +12,34 @@
|
|
|
12
12
|
|
|
13
13
|
### Properties & Attributes
|
|
14
14
|
|
|
15
|
-
| Properties
|
|
16
|
-
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
target
|
|
28
|
-
type
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
15
|
+
| Properties | Attributes | Modifiers | Type | Default | Description |
|
|
16
|
+
| -------------- | -------------- | --------- | ------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
17
|
+
| appearance | appearance | | string | "default" | Defines whether the component will be on lighter or darker backgrounds. |
|
|
18
|
+
| download | download | | boolean | false | If true, the linked resource will be downloaded when the hyperlink is clicked. |
|
|
19
|
+
| fluid | fluid | | boolean | | If true and `type="cta"`, the hyperlink will have a fluid-width UI. |
|
|
20
|
+
| href | href | | string | | Defines the URL of the linked page. |
|
|
21
|
+
| layout | layout | | string | {'default'} | Defines the language of an element. |
|
|
22
|
+
| ondark | ondark | | boolean | false | DEPRECATED - use `appearance` instead. |
|
|
23
|
+
| referrerpolicy | referrerpolicy | | boolean | | If true, sets `strict-origin-when-cross-origin` to control the referrer information sent with requests. |
|
|
24
|
+
| rel | rel | | string | | Defines the relationship between the current document and the linked document. |
|
|
25
|
+
| role | | | String | | Defines ARIA roles; currently supports `button` for extended experiences. |
|
|
26
|
+
| safeUri | | readonly | string | | Returns a safe URI based on the provided `href`.<br>If `href` is truthy, it generates a safe URL using the `safeUrl` function.<br>Otherwise, it returns an empty string. |
|
|
27
|
+
| target | target | | string | | Defines where to open the linked document. |
|
|
28
|
+
| type | type | | string | | Defines the type of hyperlink; accepts `nav` or `cta`. |
|
|
29
|
+
| variant | variant | | string | "primary" | Sets button variant option. |
|
|
30
|
+
|
|
32
31
|
### Methods
|
|
33
32
|
|
|
34
|
-
| Name
|
|
35
|
-
|
|
|
36
|
-
register | `name` (string) - The name of element that you want to register to. |
|
|
37
|
-
|
|
33
|
+
| Name | Parameters | Return | Description |
|
|
34
|
+
| -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
|
|
35
|
+
| register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
|
|
36
|
+
|
|
38
37
|
### CSS Shadow Parts
|
|
39
38
|
|
|
40
|
-
| Name
|
|
41
|
-
|
|
|
42
|
-
link
|
|
43
|
-
targetIcon | Allows styling to be applied to the icon that appears next to the hyperlink.
|
|
39
|
+
| Name | Description |
|
|
40
|
+
| ---------- | ---------------------------------------------------------------------------- |
|
|
41
|
+
| link | Allows styling to be applied to the `a` element. |
|
|
42
|
+
| targetIcon | Allows styling to be applied to the icon that appears next to the hyperlink. |
|
|
44
43
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
45
44
|
|
|
46
45
|
## API Examples
|
|
@@ -355,12 +354,12 @@ no hypertext transfer protocol absolute URL to <a class="hyperlink" href="https:
|
|
|
355
354
|
|
|
356
355
|
#### Relative URLs
|
|
357
356
|
|
|
358
|
-
Absolute URLs are not always preferred. When using relative URLs
|
|
357
|
+
Absolute URLs are not always preferred. When using relative URLs `auro-hyperlink` will insert the `https://` protocol and hostname into the `<a>` element in the shadowDOM.
|
|
359
358
|
|
|
360
359
|
<div class="exampleWrapper">
|
|
361
360
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/relativeUrl.html) -->
|
|
362
361
|
<!-- The below content is automatically added from ./../apiExamples/relativeUrl.html -->
|
|
363
|
-
Example of a <auro-hyperlink
|
|
362
|
+
Example of a <auro-hyperlink href="#">relative URL</auro-hyperlink>.
|
|
364
363
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
365
364
|
</div>
|
|
366
365
|
<auro-accordion alignRight>
|
|
@@ -370,9 +369,9 @@ Absolute URLs are not always preferred. When using relative URLs, use the `relat
|
|
|
370
369
|
|
|
371
370
|
```html
|
|
372
371
|
<!-- Web component example -->
|
|
373
|
-
Example of a <auro-hyperlink
|
|
372
|
+
Example of a <auro-hyperlink href="#">relative URL</auro-hyperlink>
|
|
374
373
|
<!-- Output code in shadow DOM element -->
|
|
375
|
-
Example of a <a class="hyperlink" href="#"><slot>relative URL</slot></a>
|
|
374
|
+
Example of a <a class="hyperlink" href="https://auro.alaskaair.com/components/auro/hyperlink/api#"><slot>relative URL</slot></a>
|
|
376
375
|
```
|
|
377
376
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
378
377
|
</auro-accordion>
|
|
@@ -43,7 +43,7 @@ const t={ATTRIBUTE:1,CHILD:2},e$2=t=>(...e)=>({_$litDirective$:t,values:e});let
|
|
|
43
43
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
44
44
|
*/const o$3=o=>o??E;
|
|
45
45
|
|
|
46
|
-
let p$1 = class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}};var u$2='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>';let m$1 = class m extends i$2{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}};const g$1=new Map,f$3=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g$1.has(t)||g$1.set(t,fetch(t).then(e)),g$1.get(t)};var w$1=i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;
|
|
46
|
+
let p$1 = class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}};var u$2='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>';let m$1 = class m extends i$2{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}};const g$1=new Map,f$3=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g$1.has(t)||g$1.set(t,fetch(t).then(e)),g$1.get(t)};var w$1=i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
|
|
47
47
|
`;let z$1 = class z extends m$1{constructor(){super(),this.onDark=false,this.appearance="default";}static get properties(){return {...m$1.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return w$1}async fetchIcon(t,a){let e="";e="logos"===t?await f$3(`${this.uri}/${t}/${a}.svg`):await f$3(`${this.uri}/icons/${t}/${a}.svg`);return (new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=(new DOMParser).parseFromString(u$2,"text/html");this.svg=t.body.firstChild;}}}catch(t){this.svg=void 0;}}};i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
|
|
48
48
|
`;var y$1=i$5`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
|
|
49
49
|
`;var k$1=i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
|
|
@@ -564,7 +564,7 @@ class AuroElement extends i$2 {
|
|
|
564
564
|
*/
|
|
565
565
|
appearance: {
|
|
566
566
|
type: String,
|
|
567
|
-
reflect: true
|
|
567
|
+
reflect: true,
|
|
568
568
|
},
|
|
569
569
|
|
|
570
570
|
/**
|
|
@@ -607,9 +607,8 @@ class ComponentBase extends AuroElement {
|
|
|
607
607
|
constructor() {
|
|
608
608
|
super();
|
|
609
609
|
|
|
610
|
-
this.appearance =
|
|
610
|
+
this.appearance = "default";
|
|
611
611
|
this.download = false;
|
|
612
|
-
this.relative = false;
|
|
613
612
|
this.ondark = false;
|
|
614
613
|
this.variant = "primary";
|
|
615
614
|
|
|
@@ -673,7 +672,7 @@ class ComponentBase extends AuroElement {
|
|
|
673
672
|
*/
|
|
674
673
|
appearance: {
|
|
675
674
|
type: String,
|
|
676
|
-
reflect: true
|
|
675
|
+
reflect: true,
|
|
677
676
|
},
|
|
678
677
|
|
|
679
678
|
/**
|
|
@@ -708,14 +707,6 @@ class ComponentBase extends AuroElement {
|
|
|
708
707
|
reflect: true,
|
|
709
708
|
},
|
|
710
709
|
|
|
711
|
-
/**
|
|
712
|
-
* If true, the auto URL re-write feature will be disabled.
|
|
713
|
-
*/
|
|
714
|
-
relative: {
|
|
715
|
-
type: Boolean,
|
|
716
|
-
reflect: true,
|
|
717
|
-
},
|
|
718
|
-
|
|
719
710
|
/**
|
|
720
711
|
* DEPRECATED - use `appearance` instead.
|
|
721
712
|
*/
|
|
@@ -759,12 +750,12 @@ class ComponentBase extends AuroElement {
|
|
|
759
750
|
}
|
|
760
751
|
|
|
761
752
|
/**
|
|
762
|
-
* Returns a safe URI based on the provided `href
|
|
753
|
+
* Returns a safe URI based on the provided `href`.
|
|
763
754
|
* If `href` is truthy, it generates a safe URL using the `safeUrl` function.
|
|
764
755
|
* Otherwise, it returns an empty string.
|
|
765
756
|
*
|
|
766
757
|
* @example
|
|
767
|
-
* // Assuming this.href = 'http://example.com'
|
|
758
|
+
* // Assuming this.href = 'http://example.com'
|
|
768
759
|
* this.safeUri; // Returns 'http://example.com'
|
|
769
760
|
*
|
|
770
761
|
* @example
|
|
@@ -774,7 +765,7 @@ class ComponentBase extends AuroElement {
|
|
|
774
765
|
* @returns {string} The safe URI or an empty string.
|
|
775
766
|
*/
|
|
776
767
|
get safeUri() {
|
|
777
|
-
return this.href ? this.safeUrl(this.href
|
|
768
|
+
return this.href ? this.safeUrl(this.href) : "";
|
|
778
769
|
}
|
|
779
770
|
|
|
780
771
|
/**
|
|
@@ -802,56 +793,58 @@ class ComponentBase extends AuroElement {
|
|
|
802
793
|
}
|
|
803
794
|
|
|
804
795
|
/**
|
|
805
|
-
* Generates a safe URL based on the provided `href`
|
|
796
|
+
* Generates a safe URL based on the provided `href` parameter.
|
|
806
797
|
* If `href` is falsy, it returns `undefined`.
|
|
807
798
|
*
|
|
808
799
|
* @example
|
|
809
|
-
* // Assuming href = 'http://example.com'
|
|
810
|
-
* this.safeUrl(href
|
|
800
|
+
* // Assuming href = 'http://example.com'
|
|
801
|
+
* this.safeUrl(href); // Returns 'https://example.com'
|
|
811
802
|
*
|
|
812
803
|
* @example
|
|
813
|
-
* // Assuming href = '/path/to/file'
|
|
814
|
-
* this.safeUrl(href
|
|
804
|
+
* // Assuming href = '/path/to/file'
|
|
805
|
+
* this.safeUrl(href); // Returns 'https://<host>/path/to/file'
|
|
815
806
|
*
|
|
816
807
|
* @example
|
|
817
808
|
* // Assuming href = 'javascript:alert("Hello")'
|
|
818
|
-
* this.safeUrl(href
|
|
809
|
+
* this.safeUrl(href); // Returns undefined
|
|
819
810
|
*
|
|
820
811
|
* @private
|
|
821
812
|
* @param {string} href - The original URL.
|
|
822
|
-
* @param {boolean} relative - Indicates whether the URL is relative.
|
|
823
813
|
* @returns {string|undefined} The safe URL or `undefined`.
|
|
824
814
|
*/
|
|
825
|
-
safeUrl(href
|
|
815
|
+
safeUrl(href) {
|
|
816
|
+
let safeUrl;
|
|
817
|
+
|
|
826
818
|
if (!href) {
|
|
827
819
|
return undefined;
|
|
828
820
|
}
|
|
829
821
|
|
|
830
|
-
const url = new URL(href,
|
|
822
|
+
const url = new URL(href, window?.location?.href);
|
|
831
823
|
|
|
832
824
|
switch (url.protocol) {
|
|
833
825
|
case "tel:":
|
|
834
826
|
case "sms:":
|
|
835
827
|
case "mailto:":
|
|
836
|
-
|
|
828
|
+
safeUrl = href;
|
|
829
|
+
break;
|
|
837
830
|
|
|
838
831
|
// Specifically want to render NO shadowDOM for the following refs
|
|
839
832
|
case "javascript:":
|
|
840
833
|
case "data:":
|
|
841
834
|
case "vbscript:":
|
|
842
|
-
|
|
835
|
+
safeUrl = undefined;
|
|
836
|
+
break;
|
|
843
837
|
|
|
844
|
-
default:
|
|
845
|
-
if (!
|
|
838
|
+
default: {
|
|
839
|
+
if (!window?.location?.href.includes("localhost")) {
|
|
846
840
|
url.protocol = "https:";
|
|
847
|
-
return url.href;
|
|
848
841
|
}
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
*/
|
|
853
|
-
return href.replace(/^(?:[^:]+:)?\/\/?/, "/");
|
|
842
|
+
safeUrl = url.href;
|
|
843
|
+
break;
|
|
844
|
+
}
|
|
854
845
|
}
|
|
846
|
+
|
|
847
|
+
return safeUrl;
|
|
855
848
|
}
|
|
856
849
|
|
|
857
850
|
/**
|
|
@@ -895,29 +888,20 @@ class ComponentBase extends AuroElement {
|
|
|
895
888
|
*/
|
|
896
889
|
targetIcon(target) {
|
|
897
890
|
/**
|
|
898
|
-
* Checks if a URL's domain is from the
|
|
891
|
+
* Checks if a URL's domain is from the current domain or its subdomains.
|
|
899
892
|
* @param {string} url - The URL to check.
|
|
900
|
-
* @returns {boolean} Returns true if the URL's domain is
|
|
893
|
+
* @returns {boolean} Returns true if the URL's domain is equals to current domain or one of its subdomains, otherwise false.
|
|
901
894
|
*/
|
|
902
|
-
const
|
|
903
|
-
// Relative URLs are considered part of alaskaair.com domain
|
|
904
|
-
if(this.relative) {
|
|
905
|
-
return true
|
|
906
|
-
}
|
|
895
|
+
const isCurrentDomain = (url) => {
|
|
907
896
|
const urlObject = new URL(url);
|
|
908
|
-
return urlObject.hostname.
|
|
897
|
+
return urlObject.hostname === window.location.hostname;
|
|
909
898
|
};
|
|
910
899
|
|
|
911
|
-
// If target is '_blank' and the URL's domain is
|
|
912
|
-
if (target === "_blank"
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
target === "_blank" &&
|
|
917
|
-
!isAlaskaAirDomain(this.safeUri) &&
|
|
918
|
-
this.includesDomain
|
|
919
|
-
) {
|
|
920
|
-
// If target is '_blank' and the URL does not belong to 'alaskaair.com' or its subdomains but contains a domain, return icon for external link
|
|
900
|
+
// If target is '_blank' and the URL's domain is equal to the current domain or one of its subdomains, return icon for new window
|
|
901
|
+
if (target === "_blank") {
|
|
902
|
+
if (isCurrentDomain(this.safeUri)) {
|
|
903
|
+
return this.generateIconHtml(newWindow.svg);
|
|
904
|
+
}
|
|
921
905
|
return this.generateIconHtml(externalLink.svg);
|
|
922
906
|
}
|
|
923
907
|
|
|
@@ -972,8 +956,11 @@ class ComponentBase extends AuroElement {
|
|
|
972
956
|
return rel;
|
|
973
957
|
}
|
|
974
958
|
|
|
975
|
-
if (
|
|
976
|
-
|
|
959
|
+
if (
|
|
960
|
+
target === "_blank" &&
|
|
961
|
+
this.safeUri.includes(window?.location?.hostname)
|
|
962
|
+
) {
|
|
963
|
+
return undefined;
|
|
977
964
|
}
|
|
978
965
|
|
|
979
966
|
if (
|
|
@@ -1057,7 +1044,7 @@ class ComponentBase extends AuroElement {
|
|
|
1057
1044
|
}
|
|
1058
1045
|
}
|
|
1059
1046
|
|
|
1060
|
-
var iconVersion = '9.1.
|
|
1047
|
+
var iconVersion = '9.1.1';
|
|
1061
1048
|
|
|
1062
1049
|
class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(o,s,a){const r=this.generateElementName(o,s),i$1=i`${s$1(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i$1}}class d{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`);return (o?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}class h{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}}var c=i$5`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color: var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]){--ds-auro-loader-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
|
|
1063
1050
|
`,u=i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin) * 6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs) * 6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm) * 6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md) * 6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg) * 6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}:host>.no-animation{display:none}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}
|
|
@@ -1254,7 +1241,7 @@ class AuroHyperlink extends ComponentBase {
|
|
|
1254
1241
|
const classes = {
|
|
1255
1242
|
hyperlink: this.safeUri || this.role,
|
|
1256
1243
|
"hyperlink--nav": this.type === "nav",
|
|
1257
|
-
|
|
1244
|
+
"hyperlink--ondark": this.appearance === "inverse" || this.ondark,
|
|
1258
1245
|
"hyperlink--button": this.role,
|
|
1259
1246
|
"hyperlink--secondary": this.variant === "secondary",
|
|
1260
1247
|
"hyperlink--tertiary": this.variant === "tertiary",
|
|
@@ -1270,11 +1257,11 @@ class AuroHyperlink extends ComponentBase {
|
|
|
1270
1257
|
aria-pressed="${o$3(this.role === "button" ? this.ariaPressedState(this.ariapressed) : undefined)}"
|
|
1271
1258
|
class="${e$1(classes)}"
|
|
1272
1259
|
href="${o$3(this.role ? undefined : this.safeUri)}"
|
|
1273
|
-
rel="${o$3(this.target || this.rel ? this.getRelType(this.target, this.rel) : undefined)}"
|
|
1260
|
+
.rel="${o$3(this.target || this.rel ? this.getRelType(this.target, this.rel) : undefined)}"
|
|
1274
1261
|
referrerpolicy="${o$3(this.referrerpolicy ? this.defaultReferrerPolicy : undefined)}"
|
|
1275
1262
|
role="${o$3(this.role === "button" ? this.role : undefined)}"
|
|
1276
1263
|
?download="${this.download}"
|
|
1277
|
-
target="${o$3(this.target
|
|
1264
|
+
.target="${o$3(this.target ? this.target : undefined)}"
|
|
1278
1265
|
tabindex="${o$3(this.role === "button" ? "0" : undefined)}"
|
|
1279
1266
|
>
|
|
1280
1267
|
<slot></slot>
|
|
@@ -1294,7 +1281,7 @@ class AuroHyperlink extends ComponentBase {
|
|
|
1294
1281
|
return u$1`
|
|
1295
1282
|
<auro-hyperlink-button
|
|
1296
1283
|
${n(this.hyperlinkRef)}
|
|
1297
|
-
appearance="${this.ondark ?
|
|
1284
|
+
appearance="${this.ondark ? "inverse" : this.appearance}"
|
|
1298
1285
|
?fluid="${this.fluid}"
|
|
1299
1286
|
variant="${o$3(this.variant || undefined)}"
|
|
1300
1287
|
shape="${o$3(this.shape || undefined)}"
|
package/demo/index.md
CHANGED
|
@@ -185,15 +185,9 @@ The following examples illustrate the use of `<auro-hyperlink>` with either no `
|
|
|
185
185
|
<p>
|
|
186
186
|
<auro-hyperlink href="javascript:;">JavaScript not supported</auro-hyperlink>
|
|
187
187
|
</p>
|
|
188
|
-
<p>
|
|
189
|
-
<auro-hyperlink relative href="javascript:;">JavaScript w/relative attr not supported</auro-hyperlink>
|
|
190
|
-
</p>
|
|
191
188
|
<p>
|
|
192
189
|
<auro-hyperlink href="data:text/plain;charset=utf-8,Hello%20World!">Data type not supported</auro-hyperlink>
|
|
193
190
|
</p>
|
|
194
|
-
<p>
|
|
195
|
-
<auro-hyperlink relative href="data:text/plain;charset=utf-8,Hello%20World!">Data type w/relative attr not supported</auro-hyperlink>
|
|
196
|
-
</p>
|
|
197
191
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
198
192
|
</div>
|
|
199
193
|
<auro-accordion alignRight>
|
|
@@ -208,14 +202,8 @@ The following examples illustrate the use of `<auro-hyperlink>` with either no `
|
|
|
208
202
|
<p>
|
|
209
203
|
<auro-hyperlink href="javascript:;">JavaScript not supported</auro-hyperlink>
|
|
210
204
|
</p>
|
|
211
|
-
<p>
|
|
212
|
-
<auro-hyperlink relative href="javascript:;">JavaScript w/relative attr not supported</auro-hyperlink>
|
|
213
|
-
</p>
|
|
214
205
|
<p>
|
|
215
206
|
<auro-hyperlink href="data:text/plain;charset=utf-8,Hello%20World!">Data type not supported</auro-hyperlink>
|
|
216
|
-
</p>
|
|
217
|
-
<p>
|
|
218
|
-
<auro-hyperlink relative href="data:text/plain;charset=utf-8,Hello%20World!">Data type w/relative attr not supported</auro-hyperlink>
|
|
219
207
|
</p>
|
|
220
208
|
```
|
|
221
209
|
<!-- AURO-GENERATED-CONTENT:END -->
|