@spscommerce/ds-web-components 4.5.0 → 4.7.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/lib/index.cjs.js +234 -234
- package/lib/index.esm.js +234 -234
- package/package.json +5 -5
package/lib/index.esm.js
CHANGED
|
@@ -2620,218 +2620,6 @@ var SpsFileUploadExamples = {
|
|
|
2620
2620
|
};
|
|
2621
2621
|
var templateObject_1$3, templateObject_2$3, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
|
|
2622
2622
|
|
|
2623
|
-
var CPT_NAME$2 = 'sps-insights';
|
|
2624
|
-
/** Container for Insight Cards. */
|
|
2625
|
-
var SpsInsightsComponent = /** @class */ (function (_super) {
|
|
2626
|
-
__extends(SpsInsightsComponent, _super);
|
|
2627
|
-
function SpsInsightsComponent() {
|
|
2628
|
-
var _this = _super.call(this) || this;
|
|
2629
|
-
_this.content = [];
|
|
2630
|
-
_this.showAdditionalInsights = false;
|
|
2631
|
-
_this.toggleAdditionalInsights = _this.toggleAdditionalInsights.bind(_this);
|
|
2632
|
-
return _this;
|
|
2633
|
-
}
|
|
2634
|
-
Object.defineProperty(SpsInsightsComponent.prototype, ClassBindings, {
|
|
2635
|
-
get: function () {
|
|
2636
|
-
return [
|
|
2637
|
-
CPT_NAME$2,
|
|
2638
|
-
this.showAdditionalInsights && CPT_NAME$2 + "--show-additional",
|
|
2639
|
-
this.details && Array.from(this.details).every(function (d) { return !d.textContent; })
|
|
2640
|
-
? CPT_NAME$2 + "--no-details"
|
|
2641
|
-
: null,
|
|
2642
|
-
this.content.length === 6 ? CPT_NAME$2 + "--break-4" : null,
|
|
2643
|
-
this.content.length === 7 ? CPT_NAME$2 + "--break-5" : null,
|
|
2644
|
-
this.content.length === 8 ? CPT_NAME$2 + "--break-5" : null,
|
|
2645
|
-
];
|
|
2646
|
-
},
|
|
2647
|
-
enumerable: false,
|
|
2648
|
-
configurable: true
|
|
2649
|
-
});
|
|
2650
|
-
/** Only the first ten Insight Cards are visible by default; the rest are behind
|
|
2651
|
-
* the "Show Additional Insights"/"Hide Additional Insights" button. This method
|
|
2652
|
-
* will toggle the additional insights.
|
|
2653
|
-
*/
|
|
2654
|
-
SpsInsightsComponent.prototype.toggleAdditionalInsights = function () {
|
|
2655
|
-
this.showAdditionalInsights = !this.showAdditionalInsights;
|
|
2656
|
-
this.update();
|
|
2657
|
-
};
|
|
2658
|
-
SpsInsightsComponent.prototype.render = function () {
|
|
2659
|
-
return (h("div", { "data-fragment": true },
|
|
2660
|
-
this.content,
|
|
2661
|
-
this.content.length > 10
|
|
2662
|
-
&& (h("div", { className: "sps-button sps-button--link", onClick: this.toggleAdditionalInsights },
|
|
2663
|
-
h("button", { type: "button" },
|
|
2664
|
-
this.showAdditionalInsights ? 'Hide ' : 'Show ',
|
|
2665
|
-
"Additional Insights")))));
|
|
2666
|
-
};
|
|
2667
|
-
SpsInsightsComponent.displayName = CPT_NAME$2;
|
|
2668
|
-
SpsInsightsComponent.props = {};
|
|
2669
|
-
__decorate([
|
|
2670
|
-
Content(),
|
|
2671
|
-
__metadata("design:type", Object)
|
|
2672
|
-
], SpsInsightsComponent.prototype, "content", void 0);
|
|
2673
|
-
__decorate([
|
|
2674
|
-
QuerySelectorAll('.sps-insight-card__detail'),
|
|
2675
|
-
__metadata("design:type", NodeList)
|
|
2676
|
-
], SpsInsightsComponent.prototype, "details", void 0);
|
|
2677
|
-
SpsInsightsComponent = __decorate([
|
|
2678
|
-
Component({ tag: CPT_NAME$2 }),
|
|
2679
|
-
__metadata("design:paramtypes", [])
|
|
2680
|
-
], SpsInsightsComponent);
|
|
2681
|
-
return SpsInsightsComponent;
|
|
2682
|
-
}(HTMLElement));
|
|
2683
|
-
|
|
2684
|
-
var CPT_NAME$1 = 'sps-insight-card';
|
|
2685
|
-
var SpsInsightCardComponent = /** @class */ (function (_super) {
|
|
2686
|
-
__extends(SpsInsightCardComponent, _super);
|
|
2687
|
-
function SpsInsightCardComponent() {
|
|
2688
|
-
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
2689
|
-
/** Specifies which of the visual styling variants of the Insight Card to use. */
|
|
2690
|
-
_this.kind = SpsInsightCardKind.GENERAL;
|
|
2691
|
-
return _this;
|
|
2692
|
-
}
|
|
2693
|
-
Object.defineProperty(SpsInsightCardComponent.prototype, ClassBindings, {
|
|
2694
|
-
get: function () {
|
|
2695
|
-
return [
|
|
2696
|
-
CPT_NAME$1,
|
|
2697
|
-
CPT_NAME$1 + "--" + this.kind,
|
|
2698
|
-
this.detail && this.detail.children.length ? CPT_NAME$1 + "--has-detail" : null,
|
|
2699
|
-
];
|
|
2700
|
-
},
|
|
2701
|
-
enumerable: false,
|
|
2702
|
-
configurable: true
|
|
2703
|
-
});
|
|
2704
|
-
SpsInsightCardComponent.prototype.render = function (_a) {
|
|
2705
|
-
var t = _a.t;
|
|
2706
|
-
var metric = h("div", { className: CPT_NAME$1 + "__metric-count" }, this.metric);
|
|
2707
|
-
var description = (h("div", { className: CPT_NAME$1 + "__description" },
|
|
2708
|
-
h("div", { className: CPT_NAME$1 + "__title",
|
|
2709
|
-
// Both Chrome & FF ignore -webkit-box-orient in the actual CSS for some reason
|
|
2710
|
-
// Also the TS types don't think -webkit-box-orient is a real CSS property
|
|
2711
|
-
style: { '-webkit-box-orient': 'vertical' } }, this.title),
|
|
2712
|
-
h("div", { className: CPT_NAME$1 + "__detail" }, this.content)));
|
|
2713
|
-
var _b = __read((this.partnerCount
|
|
2714
|
-
? t('design-system:insightCard.partnerCount', { count: this.partnerCount, total: this.totalPartners })
|
|
2715
|
-
: '').split('|'), 3), count = _b[0], ofText = _b[1], total = _b[2];
|
|
2716
|
-
return (h("div", { "data-fragment": true },
|
|
2717
|
-
h("div", { className: CPT_NAME$1 + "__body" },
|
|
2718
|
-
this.icon ? h("i", { className: "sps-icon sps-icon-" + this.icon }) : h("i", { className: "sps-icon sps-icon-" + SpsInsightCardIcons[this.kind] }),
|
|
2719
|
-
metric,
|
|
2720
|
-
description),
|
|
2721
|
-
this.partnerCount && (h("div", { className: CPT_NAME$1 + "__partner-count" },
|
|
2722
|
-
this.partnerCount === this.totalPartners
|
|
2723
|
-
? h("div", null, t('design-system:insightCard.all'))
|
|
2724
|
-
: (h("div", { "data-fragment": true },
|
|
2725
|
-
h("div", null, count),
|
|
2726
|
-
h("div", null, ofText),
|
|
2727
|
-
h("div", null, total))),
|
|
2728
|
-
h("div", { className: CPT_NAME$1 + "__partners-text" }, t('design-system:insightCard.partners'))))));
|
|
2729
|
-
};
|
|
2730
|
-
SpsInsightCardComponent.displayName = CPT_NAME$1;
|
|
2731
|
-
SpsInsightCardComponent.props = {
|
|
2732
|
-
icon: 'SpsIcon',
|
|
2733
|
-
kind: 'SpsInsightCardKind',
|
|
2734
|
-
title: 'string',
|
|
2735
|
-
metric: 'number',
|
|
2736
|
-
partnerCount: 'number',
|
|
2737
|
-
totalPartners: 'number',
|
|
2738
|
-
secondary: 'boolean',
|
|
2739
|
-
};
|
|
2740
|
-
__decorate([
|
|
2741
|
-
Prop(),
|
|
2742
|
-
__metadata("design:type", String)
|
|
2743
|
-
], SpsInsightCardComponent.prototype, "icon", void 0);
|
|
2744
|
-
__decorate([
|
|
2745
|
-
Prop(),
|
|
2746
|
-
__metadata("design:type", Object)
|
|
2747
|
-
], SpsInsightCardComponent.prototype, "kind", void 0);
|
|
2748
|
-
__decorate([
|
|
2749
|
-
Prop(),
|
|
2750
|
-
__metadata("design:type", String)
|
|
2751
|
-
], SpsInsightCardComponent.prototype, "title", void 0);
|
|
2752
|
-
__decorate([
|
|
2753
|
-
Prop(),
|
|
2754
|
-
__metadata("design:type", Number)
|
|
2755
|
-
], SpsInsightCardComponent.prototype, "metric", void 0);
|
|
2756
|
-
__decorate([
|
|
2757
|
-
Prop(),
|
|
2758
|
-
__metadata("design:type", Number)
|
|
2759
|
-
], SpsInsightCardComponent.prototype, "partnerCount", void 0);
|
|
2760
|
-
__decorate([
|
|
2761
|
-
Prop(),
|
|
2762
|
-
__metadata("design:type", Number)
|
|
2763
|
-
], SpsInsightCardComponent.prototype, "totalPartners", void 0);
|
|
2764
|
-
__decorate([
|
|
2765
|
-
Prop(),
|
|
2766
|
-
__metadata("design:type", Boolean)
|
|
2767
|
-
], SpsInsightCardComponent.prototype, "secondary", void 0);
|
|
2768
|
-
__decorate([
|
|
2769
|
-
Content(),
|
|
2770
|
-
__metadata("design:type", Object)
|
|
2771
|
-
], SpsInsightCardComponent.prototype, "content", void 0);
|
|
2772
|
-
__decorate([
|
|
2773
|
-
QuerySelector("." + CPT_NAME$1 + "__detail"),
|
|
2774
|
-
__metadata("design:type", Object)
|
|
2775
|
-
], SpsInsightCardComponent.prototype, "detail", void 0);
|
|
2776
|
-
SpsInsightCardComponent = __decorate([
|
|
2777
|
-
Component({ tag: CPT_NAME$1 })
|
|
2778
|
-
], SpsInsightCardComponent);
|
|
2779
|
-
return SpsInsightCardComponent;
|
|
2780
|
-
}(HTMLElement));
|
|
2781
|
-
|
|
2782
|
-
var SpsInsightCardExamples = {
|
|
2783
|
-
basic: {
|
|
2784
|
-
label: 'Basic Insight Cards',
|
|
2785
|
-
examples: {
|
|
2786
|
-
basic: {
|
|
2787
|
-
jsx: code(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n "], ["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n "]))),
|
|
2788
|
-
},
|
|
2789
|
-
},
|
|
2790
|
-
},
|
|
2791
|
-
details: {
|
|
2792
|
-
label: 'With Details',
|
|
2793
|
-
examples: {
|
|
2794
|
-
details: {
|
|
2795
|
-
jsx: code(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n </sps-insights>\n "], ["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n </sps-insights>\n "]))),
|
|
2796
|
-
},
|
|
2797
|
-
},
|
|
2798
|
-
},
|
|
2799
|
-
partner_count: {
|
|
2800
|
-
label: 'Partner Count',
|
|
2801
|
-
examples: {
|
|
2802
|
-
partner_count: {
|
|
2803
|
-
jsx: code(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"250\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"122\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"207\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"12\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"94\"\n totalPartners=\"250\"\n ></sps-insight-card>\n </sps-insights>\n "], ["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"250\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"122\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"207\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"12\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"94\"\n totalPartners=\"250\"\n ></sps-insight-card>\n </sps-insights>\n "]))),
|
|
2804
|
-
},
|
|
2805
|
-
},
|
|
2806
|
-
},
|
|
2807
|
-
expansion: {
|
|
2808
|
-
label: '10+ Insight Cards',
|
|
2809
|
-
examples: {
|
|
2810
|
-
expansion: {
|
|
2811
|
-
jsx: code(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n </sps-insights>\n "], ["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n </sps-insights>\n "]))),
|
|
2812
|
-
},
|
|
2813
|
-
},
|
|
2814
|
-
},
|
|
2815
|
-
events: {
|
|
2816
|
-
label: 'Adding a click handler',
|
|
2817
|
-
description: code(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n <p>Attaching event handlers to native web components in React cannot be done the usual way at this time.\n Here is how to do it:</p>\n "], ["\n <p>Attaching event handlers to native web components in React cannot be done the usual way at this time.\n Here is how to do it:</p>\n "]))),
|
|
2818
|
-
examples: {
|
|
2819
|
-
events: {
|
|
2820
|
-
react: code(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n function Component() {\n function handleClick() {\n window.alert(\"Insight card clicked\");\n }\n\n const ref = React.useRef();\n React.useEffect(() => {\n ref.current.addEventListener(\"click\", handleClick);\n return () => {\n ref.current.removeEventListener(\"click\", handleClick);\n };\n }, []);\n\n return (\n <sps-insights>\n <sps-insight-card ref={ref}\n kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n );\n }\n "], ["\n function Component() {\n function handleClick() {\n window.alert(\"Insight card clicked\");\n }\n\n const ref = React.useRef();\n React.useEffect(() => {\n ref.current.addEventListener(\"click\", handleClick);\n return () => {\n ref.current.removeEventListener(\"click\", handleClick);\n };\n }, []);\n\n return (\n <sps-insights>\n <sps-insight-card ref={ref}\n kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n );\n }\n "]))),
|
|
2821
|
-
},
|
|
2822
|
-
},
|
|
2823
|
-
},
|
|
2824
|
-
alternateIcon: {
|
|
2825
|
-
label: 'Using alternate icons',
|
|
2826
|
-
examples: {
|
|
2827
|
-
basic: {
|
|
2828
|
-
react: code(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n function DemoComponent() {\n return (\n <sps-insights>\n <sps-insight-card\n kind=\"general\"\n metric=\"1234\"\n icon={SpsIcon.DOLLAR_SIGN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"processing\"\n metric=\"1234\"\n icon={SpsIcon.ASTERISK}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"success\"\n metric=\"1234\"\n icon={SpsIcon.USER}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"warning\"\n metric=\"1234\"\n icon={SpsIcon.FOLDER_OPEN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"error\"\n metric=\"1234\"\n icon={SpsIcon.BAN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n )\n }\n "], ["\n function DemoComponent() {\n return (\n <sps-insights>\n <sps-insight-card\n kind=\"general\"\n metric=\"1234\"\n icon={SpsIcon.DOLLAR_SIGN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"processing\"\n metric=\"1234\"\n icon={SpsIcon.ASTERISK}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"success\"\n metric=\"1234\"\n icon={SpsIcon.USER}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"warning\"\n metric=\"1234\"\n icon={SpsIcon.FOLDER_OPEN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"error\"\n metric=\"1234\"\n icon={SpsIcon.BAN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n )\n }\n "]))),
|
|
2829
|
-
},
|
|
2830
|
-
},
|
|
2831
|
-
},
|
|
2832
|
-
};
|
|
2833
|
-
var templateObject_1$2, templateObject_2$2, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1;
|
|
2834
|
-
|
|
2835
2623
|
var SpsNavTabComponent = /** @class */ (function (_super) {
|
|
2836
2624
|
__extends(SpsNavTabComponent, _super);
|
|
2837
2625
|
function SpsNavTabComponent() {
|
|
@@ -2922,22 +2710,22 @@ var SpsNavTabSetComponent = /** @class */ (function (_super) {
|
|
|
2922
2710
|
var SpsNavTabsExamples = {
|
|
2923
2711
|
basic: {
|
|
2924
2712
|
label: 'Basic Navigation Tabs',
|
|
2925
|
-
description: code(templateObject_1$
|
|
2713
|
+
description: code(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n <p>Navigation tabs native web component</p>\n "], ["\n <p>Navigation tabs native web component</p>\n "]))),
|
|
2926
2714
|
examples: {
|
|
2927
2715
|
basic: {
|
|
2928
|
-
react: code(templateObject_2$
|
|
2716
|
+
react: code(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n function DemoComponent() {\n const tabs = [\n { label: \"Tab A\", icon: \"chart-line\" },\n { label: \"Tab B\", icon: \"chart-bar\", tag: \"12\" },\n { label: \"Tab C\", icon: \"chart-pie\" }\n ]\n\n const [activeTab, setActiveTab] = React.useState(0)\n\n return (\n <sps-nav-tab-set>\n {tabs.map((tab, index) => (\n <sps-nav-tab\n key={index}\n icon={tab.icon}\n label={tab.label}\n tag={tab.tag}\n active={index === activeTab || null}\n onClick={() => setActiveTab(index)}\n />\n ))}\n </sps-nav-tab-set>\n )\n }\n "], ["\n function DemoComponent() {\n const tabs = [\n { label: \"Tab A\", icon: \"chart-line\" },\n { label: \"Tab B\", icon: \"chart-bar\", tag: \"12\" },\n { label: \"Tab C\", icon: \"chart-pie\" }\n ]\n\n const [activeTab, setActiveTab] = React.useState(0)\n\n return (\n <sps-nav-tab-set>\n {tabs.map((tab, index) => (\n <sps-nav-tab\n key={index}\n icon={tab.icon}\n label={tab.label}\n tag={tab.tag}\n active={index === activeTab || null}\n onClick={() => setActiveTab(index)}\n />\n ))}\n </sps-nav-tab-set>\n )\n }\n "]))),
|
|
2929
2717
|
},
|
|
2930
2718
|
},
|
|
2931
2719
|
},
|
|
2932
2720
|
};
|
|
2933
|
-
var templateObject_1$
|
|
2721
|
+
var templateObject_1$2, templateObject_2$2;
|
|
2934
2722
|
|
|
2935
2723
|
var SpsPhotoDisplayMode;
|
|
2936
2724
|
(function (SpsPhotoDisplayMode) {
|
|
2937
2725
|
SpsPhotoDisplayMode["FIT"] = "fit";
|
|
2938
2726
|
SpsPhotoDisplayMode["FILL"] = "fill";
|
|
2939
2727
|
})(SpsPhotoDisplayMode || (SpsPhotoDisplayMode = {}));
|
|
2940
|
-
var CPT_NAME = 'sps-photo';
|
|
2728
|
+
var CPT_NAME$2 = 'sps-photo';
|
|
2941
2729
|
var SpsPhotoComponent = /** @class */ (function (_super) {
|
|
2942
2730
|
__extends(SpsPhotoComponent, _super);
|
|
2943
2731
|
function SpsPhotoComponent() {
|
|
@@ -2976,11 +2764,11 @@ var SpsPhotoComponent = /** @class */ (function (_super) {
|
|
|
2976
2764
|
Object.defineProperty(SpsPhotoComponent.prototype, ClassBindings, {
|
|
2977
2765
|
get: function () {
|
|
2978
2766
|
return [
|
|
2979
|
-
CPT_NAME,
|
|
2767
|
+
CPT_NAME$2,
|
|
2980
2768
|
this.fitWidth
|
|
2981
|
-
? CPT_NAME + "--fit-width"
|
|
2982
|
-
: CPT_NAME + "--fit-height",
|
|
2983
|
-
this.placeholderIcon && CPT_NAME + "--placeholder",
|
|
2769
|
+
? CPT_NAME$2 + "--fit-width"
|
|
2770
|
+
: CPT_NAME$2 + "--fit-height",
|
|
2771
|
+
this.placeholderIcon && CPT_NAME$2 + "--placeholder",
|
|
2984
2772
|
];
|
|
2985
2773
|
},
|
|
2986
2774
|
enumerable: false,
|
|
@@ -3031,7 +2819,7 @@ var SpsPhotoComponent = /** @class */ (function (_super) {
|
|
|
3031
2819
|
}
|
|
3032
2820
|
return h("i", { className: "sps-icon sps-icon-" + this.placeholderIcon });
|
|
3033
2821
|
};
|
|
3034
|
-
SpsPhotoComponent.displayName = CPT_NAME;
|
|
2822
|
+
SpsPhotoComponent.displayName = CPT_NAME$2;
|
|
3035
2823
|
SpsPhotoComponent.props = {
|
|
3036
2824
|
src: 'string',
|
|
3037
2825
|
altText: 'string',
|
|
@@ -3068,7 +2856,7 @@ var SpsPhotoComponent = /** @class */ (function (_super) {
|
|
|
3068
2856
|
__metadata("design:type", Object)
|
|
3069
2857
|
], SpsPhotoComponent.prototype, "fitWidth", void 0);
|
|
3070
2858
|
SpsPhotoComponent = __decorate([
|
|
3071
|
-
Component({ tag: CPT_NAME })
|
|
2859
|
+
Component({ tag: CPT_NAME$2 })
|
|
3072
2860
|
], SpsPhotoComponent);
|
|
3073
2861
|
return SpsPhotoComponent;
|
|
3074
2862
|
}(HTMLElement));
|
|
@@ -3076,34 +2864,34 @@ var SpsPhotoComponent = /** @class */ (function (_super) {
|
|
|
3076
2864
|
var SpsPhotoExamples = {
|
|
3077
2865
|
sizing: {
|
|
3078
2866
|
label: 'Sizing',
|
|
3079
|
-
description: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n <p>\n Photos are block elements, so a photo fills its container's width unless\n an explicit width is set. It is always a 4:3 aspect ratio. In this example,\n photos have been placed in cards which have different widths in the 12\n column grid.\n </p>\n "], ["\n <p>\n Photos are block elements, so a photo fills its container's width unless\n an explicit width is set. It is always a 4:3 aspect ratio. In this example,\n photos have been placed in cards which have different widths in the 12\n column grid.\n </p>\n "]))),
|
|
2867
|
+
description: code(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n <p>\n Photos are block elements, so a photo fills its container's width unless\n an explicit width is set. It is always a 4:3 aspect ratio. In this example,\n photos have been placed in cards which have different widths in the 12\n column grid.\n </p>\n "], ["\n <p>\n Photos are block elements, so a photo fills its container's width unless\n an explicit width is set. It is always a 4:3 aspect ratio. In this example,\n photos have been placed in cards which have different widths in the 12\n column grid.\n </p>\n "]))),
|
|
3080
2868
|
examples: {
|
|
3081
2869
|
basic: {
|
|
3082
|
-
jsx: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-2\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n <div className=\"sfg-col-4\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n <div className=\"sfg-col-6\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-2\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n <div className=\"sfg-col-4\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n <div className=\"sfg-col-6\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n </div>\n "]))),
|
|
2870
|
+
jsx: code(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-2\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n <div className=\"sfg-col-4\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n <div className=\"sfg-col-6\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-2\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n <div className=\"sfg-col-4\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n <div className=\"sfg-col-6\">\n <sps-card>\n <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n </sps-card>\n </div>\n </div>\n "]))),
|
|
3083
2871
|
},
|
|
3084
2872
|
},
|
|
3085
2873
|
},
|
|
3086
2874
|
displayMode: {
|
|
3087
2875
|
label: 'Fill vs. Fit',
|
|
3088
|
-
description: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n <p>\n There are two display modes available:\n <ul>\n <li><b>\"fill\"</b> fills the entire 4:3 container, cropping off any excess portions of the image.\n <li><b>\"fit\"</b> fits the entire image into the container, leaving any excess portions of the container blank.\n </ul>\n </p>\n "], ["\n <p>\n There are two display modes available:\n <ul>\n <li><b>\"fill\"</b> fills the entire 4:3 container, cropping off any excess portions of the image.\n <li><b>\"fit\"</b> fits the entire image into the container, leaving any excess portions of the container blank.\n </ul>\n </p>\n "]))),
|
|
2876
|
+
description: code(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n <p>\n There are two display modes available:\n <ul>\n <li><b>\"fill\"</b> fills the entire 4:3 container, cropping off any excess portions of the image.\n <li><b>\"fit\"</b> fits the entire image into the container, leaving any excess portions of the container blank.\n </ul>\n </p>\n "], ["\n <p>\n There are two display modes available:\n <ul>\n <li><b>\"fill\"</b> fills the entire 4:3 container, cropping off any excess portions of the image.\n <li><b>\"fit\"</b> fits the entire image into the container, leaving any excess portions of the container blank.\n </ul>\n </p>\n "]))),
|
|
3089
2877
|
examples: {
|
|
3090
2878
|
landscape: {
|
|
3091
2879
|
description: '<p>Landscape oriented photo (container outline added for illustrative purposes)</p>',
|
|
3092
|
-
jsx: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fill\"></sps-photo>\n </div>\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fit\"></sps-photo>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fill\"></sps-photo>\n </div>\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fit\"></sps-photo>\n </div>\n </div>\n "]))),
|
|
2880
|
+
jsx: code(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fill\"></sps-photo>\n </div>\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fit\"></sps-photo>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fill\"></sps-photo>\n </div>\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fit\"></sps-photo>\n </div>\n </div>\n "]))),
|
|
3093
2881
|
},
|
|
3094
2882
|
portrait: {
|
|
3095
2883
|
description: '<p>Portrait oriented photo (container outline added for illustrative purposes)</p>',
|
|
3096
|
-
jsx: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-portrait.jpg\" mode=\"fill\"></sps-photo>\n </div>\n <div className=\"sfg-col-4\">\n <sps-photo id=\"foo\" src=\"assets/images/photo-portrait.jpg\" mode=\"fit\"></sps-photo>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-portrait.jpg\" mode=\"fill\"></sps-photo>\n </div>\n <div className=\"sfg-col-4\">\n <sps-photo id=\"foo\" src=\"assets/images/photo-portrait.jpg\" mode=\"fit\"></sps-photo>\n </div>\n </div>\n "]))),
|
|
2884
|
+
jsx: code(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-portrait.jpg\" mode=\"fill\"></sps-photo>\n </div>\n <div className=\"sfg-col-4\">\n <sps-photo id=\"foo\" src=\"assets/images/photo-portrait.jpg\" mode=\"fit\"></sps-photo>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <sps-photo src=\"assets/images/photo-portrait.jpg\" mode=\"fill\"></sps-photo>\n </div>\n <div className=\"sfg-col-4\">\n <sps-photo id=\"foo\" src=\"assets/images/photo-portrait.jpg\" mode=\"fit\"></sps-photo>\n </div>\n </div>\n "]))),
|
|
3097
2885
|
},
|
|
3098
2886
|
},
|
|
3099
2887
|
},
|
|
3100
2888
|
placeholder: {
|
|
3101
2889
|
label: 'Placeholders',
|
|
3102
|
-
description: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n <p>\n When an image is not provided for a particular use case (such as a user avatar,\n a company photo, item image, etc.), a placeholder should be shown in its place.\n\n The placeholder's icon, selected from our SPS icon set, should represent the\n type of image it is substituting for.\n </p>\n "], ["\n <p>\n When an image is not provided for a particular use case (such as a user avatar,\n a company photo, item image, etc.), a placeholder should be shown in its place.\n\n The placeholder's icon, selected from our SPS icon set, should represent the\n type of image it is substituting for.\n </p>\n "]))),
|
|
2890
|
+
description: code(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n <p>\n When an image is not provided for a particular use case (such as a user avatar,\n a company photo, item image, etc.), a placeholder should be shown in its place.\n\n The placeholder's icon, selected from our SPS icon set, should represent the\n type of image it is substituting for.\n </p>\n "], ["\n <p>\n When an image is not provided for a particular use case (such as a user avatar,\n a company photo, item image, etc.), a placeholder should be shown in its place.\n\n The placeholder's icon, selected from our SPS icon set, should represent the\n type of image it is substituting for.\n </p>\n "]))),
|
|
3103
2891
|
examples: {
|
|
3104
2892
|
general: {
|
|
3105
2893
|
description: '<p>General Photo</p>',
|
|
3106
|
-
jsx: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\">\n <sps-photo placeholderIcon=\"photo\"></sps-photo>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\">\n <sps-photo placeholderIcon=\"photo\"></sps-photo>\n </div>\n </div>\n "]))),
|
|
2894
|
+
jsx: code(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\">\n <sps-photo placeholderIcon=\"photo\"></sps-photo>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-3\">\n <sps-photo placeholderIcon=\"photo\"></sps-photo>\n </div>\n </div>\n "]))),
|
|
3107
2895
|
},
|
|
3108
2896
|
photoAlt: {
|
|
3109
2897
|
description: '<p>Photo Alt</p>',
|
|
@@ -3124,17 +2912,17 @@ var SpsPhotoExamples = {
|
|
|
3124
2912
|
},
|
|
3125
2913
|
},
|
|
3126
2914
|
};
|
|
3127
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
2915
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
3128
2916
|
|
|
3129
2917
|
var MANIFEST = {
|
|
3130
2918
|
'File Upload': {
|
|
3131
2919
|
components: [SpsFileUploadComponent],
|
|
3132
2920
|
examples: SpsFileUploadExamples,
|
|
3133
2921
|
},
|
|
3134
|
-
'Insight Cards': {
|
|
3135
|
-
|
|
3136
|
-
|
|
3137
|
-
},
|
|
2922
|
+
// 'Insight Cards': {
|
|
2923
|
+
// components: [SpsInsightCardComponent, SpsInsightsComponent],
|
|
2924
|
+
// examples: SpsInsightCardExamples,
|
|
2925
|
+
// },
|
|
3138
2926
|
'Tabbed Navigation': {
|
|
3139
2927
|
components: [SpsNavTabComponent, SpsNavTabSetComponent],
|
|
3140
2928
|
examples: SpsNavTabsExamples,
|
|
@@ -3145,4 +2933,216 @@ var MANIFEST = {
|
|
|
3145
2933
|
},
|
|
3146
2934
|
};
|
|
3147
2935
|
|
|
2936
|
+
var CPT_NAME$1 = 'sps-insight-card';
|
|
2937
|
+
var SpsInsightCardComponent = /** @class */ (function (_super) {
|
|
2938
|
+
__extends(SpsInsightCardComponent, _super);
|
|
2939
|
+
function SpsInsightCardComponent() {
|
|
2940
|
+
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
2941
|
+
/** Specifies which of the visual styling variants of the Insight Card to use. */
|
|
2942
|
+
_this.kind = SpsInsightCardKind.GENERAL;
|
|
2943
|
+
return _this;
|
|
2944
|
+
}
|
|
2945
|
+
Object.defineProperty(SpsInsightCardComponent.prototype, ClassBindings, {
|
|
2946
|
+
get: function () {
|
|
2947
|
+
return [
|
|
2948
|
+
CPT_NAME$1,
|
|
2949
|
+
CPT_NAME$1 + "--" + this.kind,
|
|
2950
|
+
this.detail && this.detail.children.length ? CPT_NAME$1 + "--has-detail" : null,
|
|
2951
|
+
];
|
|
2952
|
+
},
|
|
2953
|
+
enumerable: false,
|
|
2954
|
+
configurable: true
|
|
2955
|
+
});
|
|
2956
|
+
SpsInsightCardComponent.prototype.render = function (_a) {
|
|
2957
|
+
var t = _a.t;
|
|
2958
|
+
var metric = h("div", { className: CPT_NAME$1 + "__metric-count" }, this.metric);
|
|
2959
|
+
var description = (h("div", { className: CPT_NAME$1 + "__description" },
|
|
2960
|
+
h("div", { className: CPT_NAME$1 + "__title",
|
|
2961
|
+
// Both Chrome & FF ignore -webkit-box-orient in the actual CSS for some reason
|
|
2962
|
+
// Also the TS types don't think -webkit-box-orient is a real CSS property
|
|
2963
|
+
style: { '-webkit-box-orient': 'vertical' } }, this.title),
|
|
2964
|
+
h("div", { className: CPT_NAME$1 + "__detail" }, this.content)));
|
|
2965
|
+
var _b = __read((this.partnerCount
|
|
2966
|
+
? t('design-system:insightCard.partnerCount', { count: this.partnerCount, total: this.totalPartners })
|
|
2967
|
+
: '').split('|'), 3), count = _b[0], ofText = _b[1], total = _b[2];
|
|
2968
|
+
return (h("div", { "data-fragment": true },
|
|
2969
|
+
h("div", { className: CPT_NAME$1 + "__body" },
|
|
2970
|
+
this.icon ? h("i", { className: "sps-icon sps-icon-" + this.icon }) : h("i", { className: "sps-icon sps-icon-" + SpsInsightCardIcons[this.kind] }),
|
|
2971
|
+
metric,
|
|
2972
|
+
description),
|
|
2973
|
+
this.partnerCount && (h("div", { className: CPT_NAME$1 + "__partner-count" },
|
|
2974
|
+
this.partnerCount === this.totalPartners
|
|
2975
|
+
? h("div", null, t('design-system:insightCard.all'))
|
|
2976
|
+
: (h("div", { "data-fragment": true },
|
|
2977
|
+
h("div", null, count),
|
|
2978
|
+
h("div", null, ofText),
|
|
2979
|
+
h("div", null, total))),
|
|
2980
|
+
h("div", { className: CPT_NAME$1 + "__partners-text" }, t('design-system:insightCard.partners'))))));
|
|
2981
|
+
};
|
|
2982
|
+
SpsInsightCardComponent.displayName = CPT_NAME$1;
|
|
2983
|
+
SpsInsightCardComponent.props = {
|
|
2984
|
+
icon: 'SpsIcon',
|
|
2985
|
+
kind: 'SpsInsightCardKind',
|
|
2986
|
+
title: 'string',
|
|
2987
|
+
metric: 'number',
|
|
2988
|
+
partnerCount: 'number',
|
|
2989
|
+
totalPartners: 'number',
|
|
2990
|
+
secondary: 'boolean',
|
|
2991
|
+
};
|
|
2992
|
+
__decorate([
|
|
2993
|
+
Prop(),
|
|
2994
|
+
__metadata("design:type", String)
|
|
2995
|
+
], SpsInsightCardComponent.prototype, "icon", void 0);
|
|
2996
|
+
__decorate([
|
|
2997
|
+
Prop(),
|
|
2998
|
+
__metadata("design:type", Object)
|
|
2999
|
+
], SpsInsightCardComponent.prototype, "kind", void 0);
|
|
3000
|
+
__decorate([
|
|
3001
|
+
Prop(),
|
|
3002
|
+
__metadata("design:type", String)
|
|
3003
|
+
], SpsInsightCardComponent.prototype, "title", void 0);
|
|
3004
|
+
__decorate([
|
|
3005
|
+
Prop(),
|
|
3006
|
+
__metadata("design:type", Number)
|
|
3007
|
+
], SpsInsightCardComponent.prototype, "metric", void 0);
|
|
3008
|
+
__decorate([
|
|
3009
|
+
Prop(),
|
|
3010
|
+
__metadata("design:type", Number)
|
|
3011
|
+
], SpsInsightCardComponent.prototype, "partnerCount", void 0);
|
|
3012
|
+
__decorate([
|
|
3013
|
+
Prop(),
|
|
3014
|
+
__metadata("design:type", Number)
|
|
3015
|
+
], SpsInsightCardComponent.prototype, "totalPartners", void 0);
|
|
3016
|
+
__decorate([
|
|
3017
|
+
Prop(),
|
|
3018
|
+
__metadata("design:type", Boolean)
|
|
3019
|
+
], SpsInsightCardComponent.prototype, "secondary", void 0);
|
|
3020
|
+
__decorate([
|
|
3021
|
+
Content(),
|
|
3022
|
+
__metadata("design:type", Object)
|
|
3023
|
+
], SpsInsightCardComponent.prototype, "content", void 0);
|
|
3024
|
+
__decorate([
|
|
3025
|
+
QuerySelector("." + CPT_NAME$1 + "__detail"),
|
|
3026
|
+
__metadata("design:type", Object)
|
|
3027
|
+
], SpsInsightCardComponent.prototype, "detail", void 0);
|
|
3028
|
+
SpsInsightCardComponent = __decorate([
|
|
3029
|
+
Component({ tag: CPT_NAME$1 })
|
|
3030
|
+
], SpsInsightCardComponent);
|
|
3031
|
+
return SpsInsightCardComponent;
|
|
3032
|
+
}(HTMLElement));
|
|
3033
|
+
|
|
3034
|
+
var CPT_NAME = 'sps-insights';
|
|
3035
|
+
/** Container for Insight Cards. */
|
|
3036
|
+
var SpsInsightsComponent = /** @class */ (function (_super) {
|
|
3037
|
+
__extends(SpsInsightsComponent, _super);
|
|
3038
|
+
function SpsInsightsComponent() {
|
|
3039
|
+
var _this = _super.call(this) || this;
|
|
3040
|
+
_this.content = [];
|
|
3041
|
+
_this.showAdditionalInsights = false;
|
|
3042
|
+
_this.toggleAdditionalInsights = _this.toggleAdditionalInsights.bind(_this);
|
|
3043
|
+
return _this;
|
|
3044
|
+
}
|
|
3045
|
+
Object.defineProperty(SpsInsightsComponent.prototype, ClassBindings, {
|
|
3046
|
+
get: function () {
|
|
3047
|
+
return [
|
|
3048
|
+
CPT_NAME,
|
|
3049
|
+
this.showAdditionalInsights && CPT_NAME + "--show-additional",
|
|
3050
|
+
this.details && Array.from(this.details).every(function (d) { return !d.textContent; })
|
|
3051
|
+
? CPT_NAME + "--no-details"
|
|
3052
|
+
: null,
|
|
3053
|
+
this.content.length === 6 ? CPT_NAME + "--break-4" : null,
|
|
3054
|
+
this.content.length === 7 ? CPT_NAME + "--break-5" : null,
|
|
3055
|
+
this.content.length === 8 ? CPT_NAME + "--break-5" : null,
|
|
3056
|
+
];
|
|
3057
|
+
},
|
|
3058
|
+
enumerable: false,
|
|
3059
|
+
configurable: true
|
|
3060
|
+
});
|
|
3061
|
+
/** Only the first ten Insight Cards are visible by default; the rest are behind
|
|
3062
|
+
* the "Show Additional Insights"/"Hide Additional Insights" button. This method
|
|
3063
|
+
* will toggle the additional insights.
|
|
3064
|
+
*/
|
|
3065
|
+
SpsInsightsComponent.prototype.toggleAdditionalInsights = function () {
|
|
3066
|
+
this.showAdditionalInsights = !this.showAdditionalInsights;
|
|
3067
|
+
this.update();
|
|
3068
|
+
};
|
|
3069
|
+
SpsInsightsComponent.prototype.render = function () {
|
|
3070
|
+
return (h("div", { "data-fragment": true },
|
|
3071
|
+
this.content,
|
|
3072
|
+
this.content.length > 10
|
|
3073
|
+
&& (h("div", { className: "sps-button sps-button--link", onClick: this.toggleAdditionalInsights },
|
|
3074
|
+
h("button", { type: "button" },
|
|
3075
|
+
this.showAdditionalInsights ? 'Hide ' : 'Show ',
|
|
3076
|
+
"Additional Insights")))));
|
|
3077
|
+
};
|
|
3078
|
+
SpsInsightsComponent.displayName = CPT_NAME;
|
|
3079
|
+
SpsInsightsComponent.props = {};
|
|
3080
|
+
__decorate([
|
|
3081
|
+
Content(),
|
|
3082
|
+
__metadata("design:type", Object)
|
|
3083
|
+
], SpsInsightsComponent.prototype, "content", void 0);
|
|
3084
|
+
__decorate([
|
|
3085
|
+
QuerySelectorAll('.sps-insight-card__detail'),
|
|
3086
|
+
__metadata("design:type", NodeList)
|
|
3087
|
+
], SpsInsightsComponent.prototype, "details", void 0);
|
|
3088
|
+
SpsInsightsComponent = __decorate([
|
|
3089
|
+
Component({ tag: CPT_NAME }),
|
|
3090
|
+
__metadata("design:paramtypes", [])
|
|
3091
|
+
], SpsInsightsComponent);
|
|
3092
|
+
return SpsInsightsComponent;
|
|
3093
|
+
}(HTMLElement));
|
|
3094
|
+
|
|
3095
|
+
var SpsInsightCardExamples = {
|
|
3096
|
+
basic: {
|
|
3097
|
+
label: 'Basic Insight Cards',
|
|
3098
|
+
examples: {
|
|
3099
|
+
basic: {
|
|
3100
|
+
jsx: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n "], ["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n "]))),
|
|
3101
|
+
},
|
|
3102
|
+
},
|
|
3103
|
+
},
|
|
3104
|
+
details: {
|
|
3105
|
+
label: 'With Details',
|
|
3106
|
+
examples: {
|
|
3107
|
+
details: {
|
|
3108
|
+
jsx: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n </sps-insights>\n "], ["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n </sps-insights>\n "]))),
|
|
3109
|
+
},
|
|
3110
|
+
},
|
|
3111
|
+
},
|
|
3112
|
+
partner_count: {
|
|
3113
|
+
label: 'Partner Count',
|
|
3114
|
+
examples: {
|
|
3115
|
+
partner_count: {
|
|
3116
|
+
jsx: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"250\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"122\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"207\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"12\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"94\"\n totalPartners=\"250\"\n ></sps-insight-card>\n </sps-insights>\n "], ["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"250\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"122\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"207\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"12\"\n totalPartners=\"250\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"94\"\n totalPartners=\"250\"\n ></sps-insight-card>\n </sps-insights>\n "]))),
|
|
3117
|
+
},
|
|
3118
|
+
},
|
|
3119
|
+
},
|
|
3120
|
+
expansion: {
|
|
3121
|
+
label: '10+ Insight Cards',
|
|
3122
|
+
examples: {
|
|
3123
|
+
expansion: {
|
|
3124
|
+
jsx: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n </sps-insights>\n "], ["\n <sps-insights>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"processing\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"success\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n <sps-insight-card kind=\"warning\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n ></sps-insight-card>\n <sps-insight-card kind=\"error\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n partnerCount=\"100\"\n totalPartners=\"200\"\n >\n <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n </sps-insight-card>\n </sps-insights>\n "]))),
|
|
3125
|
+
},
|
|
3126
|
+
},
|
|
3127
|
+
},
|
|
3128
|
+
events: {
|
|
3129
|
+
label: 'Adding a click handler',
|
|
3130
|
+
description: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n <p>Attaching event handlers to native web components in React cannot be done the usual way at this time.\n Here is how to do it:</p>\n "], ["\n <p>Attaching event handlers to native web components in React cannot be done the usual way at this time.\n Here is how to do it:</p>\n "]))),
|
|
3131
|
+
examples: {
|
|
3132
|
+
events: {
|
|
3133
|
+
react: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n function Component() {\n function handleClick() {\n window.alert(\"Insight card clicked\");\n }\n\n const ref = React.useRef();\n React.useEffect(() => {\n ref.current.addEventListener(\"click\", handleClick);\n return () => {\n ref.current.removeEventListener(\"click\", handleClick);\n };\n }, []);\n\n return (\n <sps-insights>\n <sps-insight-card ref={ref}\n kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n );\n }\n "], ["\n function Component() {\n function handleClick() {\n window.alert(\"Insight card clicked\");\n }\n\n const ref = React.useRef();\n React.useEffect(() => {\n ref.current.addEventListener(\"click\", handleClick);\n return () => {\n ref.current.removeEventListener(\"click\", handleClick);\n };\n }, []);\n\n return (\n <sps-insights>\n <sps-insight-card ref={ref}\n kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card kind=\"general\"\n metric=\"1234\"\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n );\n }\n "]))),
|
|
3134
|
+
},
|
|
3135
|
+
},
|
|
3136
|
+
},
|
|
3137
|
+
alternateIcon: {
|
|
3138
|
+
label: 'Using alternate icons',
|
|
3139
|
+
examples: {
|
|
3140
|
+
basic: {
|
|
3141
|
+
react: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n function DemoComponent() {\n return (\n <sps-insights>\n <sps-insight-card\n kind=\"general\"\n metric=\"1234\"\n icon={SpsIcon.DOLLAR_SIGN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"processing\"\n metric=\"1234\"\n icon={SpsIcon.ASTERISK}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"success\"\n metric=\"1234\"\n icon={SpsIcon.USER}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"warning\"\n metric=\"1234\"\n icon={SpsIcon.FOLDER_OPEN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"error\"\n metric=\"1234\"\n icon={SpsIcon.BAN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n )\n }\n "], ["\n function DemoComponent() {\n return (\n <sps-insights>\n <sps-insight-card\n kind=\"general\"\n metric=\"1234\"\n icon={SpsIcon.DOLLAR_SIGN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"processing\"\n metric=\"1234\"\n icon={SpsIcon.ASTERISK}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"success\"\n metric=\"1234\"\n icon={SpsIcon.USER}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"warning\"\n metric=\"1234\"\n icon={SpsIcon.FOLDER_OPEN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n <sps-insight-card\n kind=\"error\"\n metric=\"1234\"\n icon={SpsIcon.BAN}\n title=\"Insight Card Title\"\n ></sps-insight-card>\n </sps-insights>\n )\n }\n "]))),
|
|
3142
|
+
},
|
|
3143
|
+
},
|
|
3144
|
+
},
|
|
3145
|
+
};
|
|
3146
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
3147
|
+
|
|
3148
3148
|
export { AttrBindings, ClassBindings, Component, Content, EventDispatcher, EventListener, MANIFEST, MIMEType, Prop, QuerySelector, QuerySelectorAll, SpsFileUploadComponent, SpsFileUploadExamples, SpsInsightCardComponent, SpsInsightCardExamples, SpsInsightsComponent, SpsNavTabComponent, SpsNavTabSetComponent, SpsNavTabsExamples, SpsPhotoComponent, SpsPhotoDisplayMode, SpsPhotoExamples, StyleBindings, Watch, h, namespaceOverrideRegistrar, register, webComponentsUseI18n };
|