sas-ui 0.8.176 → 0.8.178
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/dist/cjs/sas-alert_25.cjs.entry.js +11 -4
- package/dist/collection/components/sas-stepper/sas-stepper.css +3 -3
- package/dist/collection/components/sas-stepper/sas-stepper.js +10 -3
- package/dist/custom-elements/index.js +11 -4
- package/dist/esm/sas-alert_25.entry.js +11 -4
- package/dist/sas-ui/{p-cd31c7ac.entry.js → p-2fd37187.entry.js} +1 -1
- package/dist/sas-ui/sas-ui.esm.js +1 -1
- package/dist/types/components/sas-stepper/sas-stepper.d.ts +1 -0
- package/package.json +1 -1
|
@@ -5030,7 +5030,7 @@ let SasSelect = class {
|
|
|
5030
5030
|
};
|
|
5031
5031
|
SasSelect.style = sasSelectCss;
|
|
5032
5032
|
|
|
5033
|
-
const sasStepperCss = ":host{display:flex}:host .container{flex-grow:1;display:flex;align-items:center}:host sas-button{--button-width:
|
|
5033
|
+
const sasStepperCss = ":host{display:flex}:host .container{flex-grow:1;display:flex;align-items:center}:host sas-button{--button-width:24px;--button-height:24px;--button-border-radius:50%;--button-font-size:14px;--button-padding:0;--button-border:2px solid var(--s-400);--button-background-color:none;--button-color:var(--s-400);position:relative}:host sas-button:after{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:20px;height:20px;background-color:white;border:2px solid var(--primary);border-radius:50%;z-index:-1;opacity:0}:host sas-button>.step-name{text-transform:capitalize;position:absolute;font-size:18px;white-space:nowrap}:host sas-button[data-status=active]:after{opacity:1}:host sas-divider{flex-grow:1;padding:0;z-index:0}:host sas-button[data-status=complete]{--button-border:2px solid var(--primary);--button-background-color:var(--primary);--button-color:#FFFFFF}:host sas-button[data-status=active]{--button-border:2px solid var(--primary)}:host sas-button[data-status=complete]+sas-divider{--divider-color:var(--primary)}:host([direction=row]) .container{flex-direction:row}:host([direction=row]) sas-button>.step-name{top:calc(100% + 15px);left:50%;transform:translateX(-50%)}:host([direction=column]){height:100%}:host([direction=column]) .container{flex-direction:column;align-items:start}:host([direction=column]) sas-divider{margin-left:11.5px;min-height:32px}:host([direction=column]) sas-button>.step-name{left:36px}:host([background-theme=light]) sas-button>.step-name{color:var(--Secondary)}:host([background-theme=light]) sas-button[data-status=complete]>.step-name{color:var(--s-600)}:host([background-theme=light]) sas-button[data-status=active]>.step-name{color:var(--s-600)}:host([background-theme=dark]) sas-button>.step-name{color:var(--s-400)}:host([background-theme=dark]) sas-button[data-status=active]{--button-color:#FFFFFF}:host([background-theme=dark]) sas-button[data-status=complete]>.step-name{color:#FFFFFF}:host([background-theme=dark]) sas-button[data-status=active]>.step-name{color:#FFFFFF}";
|
|
5034
5034
|
|
|
5035
5035
|
let SasStepper = class {
|
|
5036
5036
|
constructor(hostRef) {
|
|
@@ -5056,6 +5056,13 @@ let SasStepper = class {
|
|
|
5056
5056
|
* Used to provide what backgound this will be displayed on, as colors need updating to allow for contrast differences
|
|
5057
5057
|
*/
|
|
5058
5058
|
this.backgroundTheme = "light";
|
|
5059
|
+
this.stepNameClickedHandler = (event) => {
|
|
5060
|
+
event.stopPropagation();
|
|
5061
|
+
const stepNumber = Number(event.target.dataset.stepIndex);
|
|
5062
|
+
if (this.current !== stepNumber) {
|
|
5063
|
+
this.current = stepNumber;
|
|
5064
|
+
}
|
|
5065
|
+
};
|
|
5059
5066
|
}
|
|
5060
5067
|
watchHandler(newValue) {
|
|
5061
5068
|
this.stepperUpdate.emit(newValue);
|
|
@@ -5072,13 +5079,13 @@ let SasStepper = class {
|
|
|
5072
5079
|
for (let i = 0; i < this.total; i += 1) {
|
|
5073
5080
|
let stepper;
|
|
5074
5081
|
if (i < this.current) {
|
|
5075
|
-
stepper = index.h("sas-button", { type: "primary", "data-status": "complete", text: `${i + 1}` }, index.h("div", { class: "step-name" }, stepperNames[i]));
|
|
5082
|
+
stepper = index.h("sas-button", { type: "primary", "data-status": "complete", text: `${i + 1}` }, index.h("div", { onClick: this.stepNameClickedHandler, "data-step-index": `${i}`, class: "step-name" }, stepperNames[i]));
|
|
5076
5083
|
}
|
|
5077
5084
|
else if (i === this.current) {
|
|
5078
|
-
stepper = index.h("sas-button", { type: "text", "data-status": "active", text: `${i + 1}` }, index.h("div", { class: "step-name" }, stepperNames[i]));
|
|
5085
|
+
stepper = index.h("sas-button", { type: "text", "data-status": "active", text: `${i + 1}` }, index.h("div", { onClick: this.stepNameClickedHandler, "data-step-index": `${i}`, class: "step-name" }, stepperNames[i]));
|
|
5079
5086
|
}
|
|
5080
5087
|
else {
|
|
5081
|
-
stepper = index.h("sas-button", { type: "text", "data-status": "inactive", text: `${i + 1}` }, index.h("div", { class: "step-name" }, stepperNames[i]));
|
|
5088
|
+
stepper = index.h("sas-button", { type: "text", "data-status": "inactive", text: `${i + 1}` }, index.h("div", { onClick: this.stepNameClickedHandler, "data-step-index": `${i}`, class: "step-name" }, stepperNames[i]));
|
|
5082
5089
|
}
|
|
5083
5090
|
steppers.push(stepper);
|
|
5084
5091
|
if (i !== this.total - 1) {
|
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
align-items: center;
|
|
8
8
|
}
|
|
9
9
|
:host sas-button {
|
|
10
|
-
--button-width:
|
|
11
|
-
--button-height:
|
|
10
|
+
--button-width: 24px;
|
|
11
|
+
--button-height: 24px;
|
|
12
12
|
--button-border-radius: 50%;
|
|
13
13
|
--button-font-size: 14px;
|
|
14
14
|
--button-padding: 0;
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
align-items: start;
|
|
75
75
|
}
|
|
76
76
|
:host([direction=column]) sas-divider {
|
|
77
|
-
margin-left:
|
|
77
|
+
margin-left: 11.5px;
|
|
78
78
|
min-height: 32px;
|
|
79
79
|
}
|
|
80
80
|
:host([direction=column]) sas-button > .step-name {
|
|
@@ -21,6 +21,13 @@ export class SasStepper {
|
|
|
21
21
|
* Used to provide what backgound this will be displayed on, as colors need updating to allow for contrast differences
|
|
22
22
|
*/
|
|
23
23
|
this.backgroundTheme = "light";
|
|
24
|
+
this.stepNameClickedHandler = (event) => {
|
|
25
|
+
event.stopPropagation();
|
|
26
|
+
const stepNumber = Number(event.target.dataset.stepIndex);
|
|
27
|
+
if (this.current !== stepNumber) {
|
|
28
|
+
this.current = stepNumber;
|
|
29
|
+
}
|
|
30
|
+
};
|
|
24
31
|
}
|
|
25
32
|
watchHandler(newValue) {
|
|
26
33
|
this.stepperUpdate.emit(newValue);
|
|
@@ -38,15 +45,15 @@ export class SasStepper {
|
|
|
38
45
|
let stepper;
|
|
39
46
|
if (i < this.current) {
|
|
40
47
|
stepper = h("sas-button", { type: "primary", "data-status": "complete", text: `${i + 1}` },
|
|
41
|
-
h("div", { class: "step-name" }, stepperNames[i]));
|
|
48
|
+
h("div", { onClick: this.stepNameClickedHandler, "data-step-index": `${i}`, class: "step-name" }, stepperNames[i]));
|
|
42
49
|
}
|
|
43
50
|
else if (i === this.current) {
|
|
44
51
|
stepper = h("sas-button", { type: "text", "data-status": "active", text: `${i + 1}` },
|
|
45
|
-
h("div", { class: "step-name" }, stepperNames[i]));
|
|
52
|
+
h("div", { onClick: this.stepNameClickedHandler, "data-step-index": `${i}`, class: "step-name" }, stepperNames[i]));
|
|
46
53
|
}
|
|
47
54
|
else {
|
|
48
55
|
stepper = h("sas-button", { type: "text", "data-status": "inactive", text: `${i + 1}` },
|
|
49
|
-
h("div", { class: "step-name" }, stepperNames[i]));
|
|
56
|
+
h("div", { onClick: this.stepNameClickedHandler, "data-step-index": `${i}`, class: "step-name" }, stepperNames[i]));
|
|
50
57
|
}
|
|
51
58
|
steppers.push(stepper);
|
|
52
59
|
if (i !== this.total - 1) {
|
|
@@ -12909,7 +12909,7 @@ let SasSelect$1 = class extends H {
|
|
|
12909
12909
|
static get style() { return sasSelectCss; }
|
|
12910
12910
|
};
|
|
12911
12911
|
|
|
12912
|
-
const sasStepperCss = ":host{display:flex}:host .container{flex-grow:1;display:flex;align-items:center}:host sas-button{--button-width:
|
|
12912
|
+
const sasStepperCss = ":host{display:flex}:host .container{flex-grow:1;display:flex;align-items:center}:host sas-button{--button-width:24px;--button-height:24px;--button-border-radius:50%;--button-font-size:14px;--button-padding:0;--button-border:2px solid var(--s-400);--button-background-color:none;--button-color:var(--s-400);position:relative}:host sas-button:after{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:20px;height:20px;background-color:white;border:2px solid var(--primary);border-radius:50%;z-index:-1;opacity:0}:host sas-button>.step-name{text-transform:capitalize;position:absolute;font-size:18px;white-space:nowrap}:host sas-button[data-status=active]:after{opacity:1}:host sas-divider{flex-grow:1;padding:0;z-index:0}:host sas-button[data-status=complete]{--button-border:2px solid var(--primary);--button-background-color:var(--primary);--button-color:#FFFFFF}:host sas-button[data-status=active]{--button-border:2px solid var(--primary)}:host sas-button[data-status=complete]+sas-divider{--divider-color:var(--primary)}:host([direction=row]) .container{flex-direction:row}:host([direction=row]) sas-button>.step-name{top:calc(100% + 15px);left:50%;transform:translateX(-50%)}:host([direction=column]){height:100%}:host([direction=column]) .container{flex-direction:column;align-items:start}:host([direction=column]) sas-divider{margin-left:11.5px;min-height:32px}:host([direction=column]) sas-button>.step-name{left:36px}:host([background-theme=light]) sas-button>.step-name{color:var(--Secondary)}:host([background-theme=light]) sas-button[data-status=complete]>.step-name{color:var(--s-600)}:host([background-theme=light]) sas-button[data-status=active]>.step-name{color:var(--s-600)}:host([background-theme=dark]) sas-button>.step-name{color:var(--s-400)}:host([background-theme=dark]) sas-button[data-status=active]{--button-color:#FFFFFF}:host([background-theme=dark]) sas-button[data-status=complete]>.step-name{color:#FFFFFF}:host([background-theme=dark]) sas-button[data-status=active]>.step-name{color:#FFFFFF}";
|
|
12913
12913
|
|
|
12914
12914
|
let SasStepper$1 = class extends H {
|
|
12915
12915
|
constructor() {
|
|
@@ -12937,6 +12937,13 @@ let SasStepper$1 = class extends H {
|
|
|
12937
12937
|
* Used to provide what backgound this will be displayed on, as colors need updating to allow for contrast differences
|
|
12938
12938
|
*/
|
|
12939
12939
|
this.backgroundTheme = "light";
|
|
12940
|
+
this.stepNameClickedHandler = (event) => {
|
|
12941
|
+
event.stopPropagation();
|
|
12942
|
+
const stepNumber = Number(event.target.dataset.stepIndex);
|
|
12943
|
+
if (this.current !== stepNumber) {
|
|
12944
|
+
this.current = stepNumber;
|
|
12945
|
+
}
|
|
12946
|
+
};
|
|
12940
12947
|
}
|
|
12941
12948
|
watchHandler(newValue) {
|
|
12942
12949
|
this.stepperUpdate.emit(newValue);
|
|
@@ -12953,13 +12960,13 @@ let SasStepper$1 = class extends H {
|
|
|
12953
12960
|
for (let i = 0; i < this.total; i += 1) {
|
|
12954
12961
|
let stepper;
|
|
12955
12962
|
if (i < this.current) {
|
|
12956
|
-
stepper = h("sas-button", { type: "primary", "data-status": "complete", text: `${i + 1}` }, h("div", { class: "step-name" }, stepperNames[i]));
|
|
12963
|
+
stepper = h("sas-button", { type: "primary", "data-status": "complete", text: `${i + 1}` }, h("div", { onClick: this.stepNameClickedHandler, "data-step-index": `${i}`, class: "step-name" }, stepperNames[i]));
|
|
12957
12964
|
}
|
|
12958
12965
|
else if (i === this.current) {
|
|
12959
|
-
stepper = h("sas-button", { type: "text", "data-status": "active", text: `${i + 1}` }, h("div", { class: "step-name" }, stepperNames[i]));
|
|
12966
|
+
stepper = h("sas-button", { type: "text", "data-status": "active", text: `${i + 1}` }, h("div", { onClick: this.stepNameClickedHandler, "data-step-index": `${i}`, class: "step-name" }, stepperNames[i]));
|
|
12960
12967
|
}
|
|
12961
12968
|
else {
|
|
12962
|
-
stepper = h("sas-button", { type: "text", "data-status": "inactive", text: `${i + 1}` }, h("div", { class: "step-name" }, stepperNames[i]));
|
|
12969
|
+
stepper = h("sas-button", { type: "text", "data-status": "inactive", text: `${i + 1}` }, h("div", { onClick: this.stepNameClickedHandler, "data-step-index": `${i}`, class: "step-name" }, stepperNames[i]));
|
|
12963
12970
|
}
|
|
12964
12971
|
steppers.push(stepper);
|
|
12965
12972
|
if (i !== this.total - 1) {
|
|
@@ -5026,7 +5026,7 @@ let SasSelect = class {
|
|
|
5026
5026
|
};
|
|
5027
5027
|
SasSelect.style = sasSelectCss;
|
|
5028
5028
|
|
|
5029
|
-
const sasStepperCss = ":host{display:flex}:host .container{flex-grow:1;display:flex;align-items:center}:host sas-button{--button-width:
|
|
5029
|
+
const sasStepperCss = ":host{display:flex}:host .container{flex-grow:1;display:flex;align-items:center}:host sas-button{--button-width:24px;--button-height:24px;--button-border-radius:50%;--button-font-size:14px;--button-padding:0;--button-border:2px solid var(--s-400);--button-background-color:none;--button-color:var(--s-400);position:relative}:host sas-button:after{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:20px;height:20px;background-color:white;border:2px solid var(--primary);border-radius:50%;z-index:-1;opacity:0}:host sas-button>.step-name{text-transform:capitalize;position:absolute;font-size:18px;white-space:nowrap}:host sas-button[data-status=active]:after{opacity:1}:host sas-divider{flex-grow:1;padding:0;z-index:0}:host sas-button[data-status=complete]{--button-border:2px solid var(--primary);--button-background-color:var(--primary);--button-color:#FFFFFF}:host sas-button[data-status=active]{--button-border:2px solid var(--primary)}:host sas-button[data-status=complete]+sas-divider{--divider-color:var(--primary)}:host([direction=row]) .container{flex-direction:row}:host([direction=row]) sas-button>.step-name{top:calc(100% + 15px);left:50%;transform:translateX(-50%)}:host([direction=column]){height:100%}:host([direction=column]) .container{flex-direction:column;align-items:start}:host([direction=column]) sas-divider{margin-left:11.5px;min-height:32px}:host([direction=column]) sas-button>.step-name{left:36px}:host([background-theme=light]) sas-button>.step-name{color:var(--Secondary)}:host([background-theme=light]) sas-button[data-status=complete]>.step-name{color:var(--s-600)}:host([background-theme=light]) sas-button[data-status=active]>.step-name{color:var(--s-600)}:host([background-theme=dark]) sas-button>.step-name{color:var(--s-400)}:host([background-theme=dark]) sas-button[data-status=active]{--button-color:#FFFFFF}:host([background-theme=dark]) sas-button[data-status=complete]>.step-name{color:#FFFFFF}:host([background-theme=dark]) sas-button[data-status=active]>.step-name{color:#FFFFFF}";
|
|
5030
5030
|
|
|
5031
5031
|
let SasStepper = class {
|
|
5032
5032
|
constructor(hostRef) {
|
|
@@ -5052,6 +5052,13 @@ let SasStepper = class {
|
|
|
5052
5052
|
* Used to provide what backgound this will be displayed on, as colors need updating to allow for contrast differences
|
|
5053
5053
|
*/
|
|
5054
5054
|
this.backgroundTheme = "light";
|
|
5055
|
+
this.stepNameClickedHandler = (event) => {
|
|
5056
|
+
event.stopPropagation();
|
|
5057
|
+
const stepNumber = Number(event.target.dataset.stepIndex);
|
|
5058
|
+
if (this.current !== stepNumber) {
|
|
5059
|
+
this.current = stepNumber;
|
|
5060
|
+
}
|
|
5061
|
+
};
|
|
5055
5062
|
}
|
|
5056
5063
|
watchHandler(newValue) {
|
|
5057
5064
|
this.stepperUpdate.emit(newValue);
|
|
@@ -5068,13 +5075,13 @@ let SasStepper = class {
|
|
|
5068
5075
|
for (let i = 0; i < this.total; i += 1) {
|
|
5069
5076
|
let stepper;
|
|
5070
5077
|
if (i < this.current) {
|
|
5071
|
-
stepper = h("sas-button", { type: "primary", "data-status": "complete", text: `${i + 1}` }, h("div", { class: "step-name" }, stepperNames[i]));
|
|
5078
|
+
stepper = h("sas-button", { type: "primary", "data-status": "complete", text: `${i + 1}` }, h("div", { onClick: this.stepNameClickedHandler, "data-step-index": `${i}`, class: "step-name" }, stepperNames[i]));
|
|
5072
5079
|
}
|
|
5073
5080
|
else if (i === this.current) {
|
|
5074
|
-
stepper = h("sas-button", { type: "text", "data-status": "active", text: `${i + 1}` }, h("div", { class: "step-name" }, stepperNames[i]));
|
|
5081
|
+
stepper = h("sas-button", { type: "text", "data-status": "active", text: `${i + 1}` }, h("div", { onClick: this.stepNameClickedHandler, "data-step-index": `${i}`, class: "step-name" }, stepperNames[i]));
|
|
5075
5082
|
}
|
|
5076
5083
|
else {
|
|
5077
|
-
stepper = h("sas-button", { type: "text", "data-status": "inactive", text: `${i + 1}` }, h("div", { class: "step-name" }, stepperNames[i]));
|
|
5084
|
+
stepper = h("sas-button", { type: "text", "data-status": "inactive", text: `${i + 1}` }, h("div", { onClick: this.stepNameClickedHandler, "data-step-index": `${i}`, class: "step-name" }, stepperNames[i]));
|
|
5078
5085
|
}
|
|
5079
5086
|
steppers.push(stepper);
|
|
5080
5087
|
if (i !== this.total - 1) {
|