@imposium-hub/components 2.3.4 → 2.3.5

package/dist/cjs/components/copy-prop-id-button/CopyPropIdButton.js

@@ -0,0 +1,75 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var icons_1 = require("../../constants/icons");
+var Button_1 = __importDefault(require("../button/Button"));
+var copy_1 = require("../../constants/copy");
+var CopyPropIdButton = /** @class */ (function (_super) {
+    __extends(CopyPropIdButton, _super);
+    function CopyPropIdButton() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.clickHandler = function () { return _this.copyPropId(); };
+        return _this;
+    }
+    CopyPropIdButton.prototype.copyPropId = function () {
+        var _a = this.props, onNotification = _a.onNotification, onError = _a.onError, copyPropId = _a.copyPropId;
+        navigator.clipboard.writeText(copyPropId).then(function () {
+            if (onNotification) {
+                onNotification("Property ID copied to clipboard.");
+            }
+        }, function () {
+            if (onError) {
+                onError('Error copying property ID to clipboard.');
+            }
+        });
+    };
+    CopyPropIdButton.prototype.render = function () {
+        return (react_1.default.createElement(Button_1.default, { tooltip: copy_1.compositions.tooltipPropId, onClick: this.clickHandler, size: 'small', style: 'subtle' }, icons_1.ICON_CLIPBOARD));
+    };
+    return CopyPropIdButton;
+}(react_1.default.PureComponent));
+exports.default = CopyPropIdButton;
+//# sourceMappingURL=CopyPropIdButton.js.map

package/dist/cjs/components/copy-prop-id-button/CopyPropIdButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyPropIdButton.js","sourceRoot":"","sources":["../../../../src/components/copy-prop-id-button/CopyPropIdButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,+CAAuD;AACvD,4DAAsC;AACtC,6CAA4D;AAQ5D;IAA+B,oCAAsD;IAArF;;QACY,kBAAY,GAAG,cAAM,OAAA,KAAI,CAAC,UAAU,EAAE,EAAjB,CAAiB,CAAC;;IA6BnD,CAAC;IA3BW,qCAAU,GAAlB;QACU,IAAA,KAA0C,IAAI,CAAC,KAAK,EAAlD,cAAc,oBAAA,EAAE,OAAO,aAAA,EAAE,UAAU,gBAAe,CAAC;QAC3D,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,IAAI,CAC1C;YACI,IAAI,cAAc,EAAE,CAAC;gBACjB,cAAc,CAAC,kCAAkC,CAAC,CAAC;YACvD,CAAC;QACL,CAAC,EACD;YACI,IAAI,OAAO,EAAE,CAAC;gBACV,OAAO,CAAC,yCAAyC,CAAC,CAAC;YACvD,CAAC;QACL,CAAC,CACJ,CAAC;IACN,CAAC;IAEM,iCAAM,GAAb;QACI,OAAO,CACH,8BAAC,gBAAM,IACH,OAAO,EAAE,mBAAI,CAAC,aAAa,EAC3B,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,QAAQ,IACb,sBAAc,CACV,CACZ,CAAC;IACN,CAAC;IACL,uBAAC;AAAD,CAAC,AA9BD,CAA+B,eAAK,CAAC,aAAa,GA8BjD;AAED,kBAAe,gBAAgB,CAAC"}

package/dist/cjs/components/dropdown/dropdown.stories.js

@@ -58,4 +58,4 @@ var defaultDropDown = function () {
         React.createElement(Dropdown_1.default, { toggleRef: dropdownToggleRef, show: toggle, position: 'bottomright', onOutsideClick: function () { return setToggle(!toggle); } }, "Sample")));
 };
 exports.defaultDropDown = defaultDropDown;
-//# sourceMappingURL=Dropdown.stories.js.map
+//# sourceMappingURL=dropdown.stories.js.map

package/dist/cjs/components/dropdown/dropdown.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.stories.js","sourceRoot":"","sources":["../../../../src/components/dropdown/Dropdown.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,4DAAsC;AACtC,wDAA0C;AAE1C,kBAAe;IACX,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,kBAAgB;CAC9B,CAAC;AAeK,IAAM,eAAe,GAAG;IAC3B,IAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5C,IAAA,KAAA,OAAsB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAA1C,MAAM,QAAA,EAAE,SAAS,QAAyB,CAAC;IAElD,OAAO,CACH;QACI,oBAAC,gBAAM,IACH,OAAO,EAAE,cAAM,OAAA,SAAS,CAAC,CAAC,MAAM,CAAC,EAAlB,CAAkB,EACjC,GAAG,EAAE,iBAAiB,6BAEjB;QACT,oBAAC,kBAAgB,IACb,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAC,aAAa,EACtB,cAAc,EAAE,cAAM,OAAA,SAAS,CAAC,CAAC,MAAM,CAAC,EAAlB,CAAkB,aAEzB,CACpB,CACN,CAAC;AACN,CAAC,CAAC;AApBW,QAAA,eAAe,mBAoB1B"}
+{"version":3,"file":"dropdown.stories.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,4DAAsC;AACtC,wDAA0C;AAE1C,kBAAe;IACX,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,kBAAgB;CAC9B,CAAC;AAeK,IAAM,eAAe,GAAG;IAC3B,IAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5C,IAAA,KAAA,OAAsB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAA1C,MAAM,QAAA,EAAE,SAAS,QAAyB,CAAC;IAElD,OAAO,CACH;QACI,oBAAC,gBAAM,IACH,OAAO,EAAE,cAAM,OAAA,SAAS,CAAC,CAAC,MAAM,CAAC,EAAlB,CAAkB,EACjC,GAAG,EAAE,iBAAiB,6BAEjB;QACT,oBAAC,kBAAgB,IACb,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAC,aAAa,EACtB,cAAc,EAAE,cAAM,OAAA,SAAS,CAAC,CAAC,MAAM,CAAC,EAAlB,CAAkB,aAEzB,CACpB,CACN,CAAC;AACN,CAAC,CAAC;AApBW,QAAA,eAAe,mBAoB1B"}

package/dist/cjs/components/error-message-preview/ErrorMessagePreview.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+interface IErrorMessagePreviewProps {
+    showMedia: boolean;
+    message: string;
+    style?: React.CSSProperties | any;
+    onRequestClose?(): void;
+}
+declare class ErrorMessagePreview extends React.PureComponent<IErrorMessagePreviewProps> {
+    private errorMsgNode;
+    private evtHandlers;
+    constructor(props: any);
+    private onClose;
+    render(): JSX.Element;
+}
+export default ErrorMessagePreview;

package/dist/cjs/components/error-message-preview/ErrorMessagePreview.js

@@ -0,0 +1,91 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var Portal_1 = __importDefault(require("../portal/Portal"));
+var Button_1 = __importDefault(require("../button/Button"));
+var copy_1 = require("../../constants/copy");
+var icons_1 = require("../../constants/icons");
+var ErrorMessagePreview = /** @class */ (function (_super) {
+    __extends(ErrorMessagePreview, _super);
+    function ErrorMessagePreview(props) {
+        var _this = _super.call(this, props) || this;
+        _this.errorMsgNode = null;
+        _this.errorMsgNode = React.createRef();
+        _this.evtHandlers = {
+            onClose: function (e) { return _this.onClose(e); }
+        };
+        return _this;
+    }
+    ErrorMessagePreview.prototype.onClose = function (e) {
+        var onRequestClose = this.props.onRequestClose;
+        e.stopPropagation();
+        onRequestClose();
+    };
+    ErrorMessagePreview.prototype.render = function () {
+        var _a = this.props, showMedia = _a.showMedia, style = _a.style, message = _a.message;
+        if (showMedia) {
+            return (React.createElement(Portal_1.default, { id: 'portal-root' },
+                React.createElement("div", { style: __assign({}, style), className: 'close-icon-preview' },
+                    React.createElement(Button_1.default, { key: 'btn-filter', onClick: this.evtHandlers.onClose, size: 'large', style: 'subtle', tooltip: copy_1.assets.field.tooltipFilter }, icons_1.ICON_TIMES)),
+                React.createElement("p", { style: style, ref: this.errorMsgNode, className: 'asset-preview-background media-preview' }, message)));
+        }
+        else {
+            return null;
+        }
+    };
+    return ErrorMessagePreview;
+}(React.PureComponent));
+exports.default = ErrorMessagePreview;
+//# sourceMappingURL=ErrorMessagePreview.js.map

package/dist/cjs/components/error-message-preview/ErrorMessagePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessagePreview.js","sourceRoot":"","sources":["../../../../src/components/error-message-preview/ErrorMessagePreview.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,4DAAsC;AACtC,4DAAsC;AACtC,6CAAsD;AACtD,+CAAmD;AASnD;IAAkC,uCAA8C;IAK5E,6BAAY,KAAK;QAAjB,YACI,kBAAM,KAAK,CAAC,SAKf;QAVO,kBAAY,GAAQ,IAAI,CAAC;QAM7B,KAAI,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;QACtC,KAAI,CAAC,WAAW,GAAG;YACf,OAAO,EAAE,UAAC,CAAC,IAAK,OAAA,KAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAf,CAAe;SAClC,CAAC;;IACN,CAAC;IAEO,qCAAO,GAAf,UAAgB,CAAC;QACL,IAAA,cAAc,GAAK,IAAI,CAAC,KAAK,eAAf,CAAgB;QACtC,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,cAAc,EAAE,CAAC;IACrB,CAAC;IAEM,oCAAM,GAAb;QACU,IAAA,KAAgC,IAAI,CAAC,KAAK,EAAxC,SAAS,eAAA,EAAE,KAAK,WAAA,EAAE,OAAO,aAAe,CAAC;QACjD,IAAI,SAAS,EAAE;YACX,OAAO,CACH,oBAAC,gBAAM,IAAC,EAAE,EAAC,aAAa;gBACpB,6BACI,KAAK,eAAO,KAAK,GACjB,SAAS,EAAE,oBAAoB;oBAC/B,oBAAC,gBAAM,IACH,GAAG,EAAC,YAAY,EAChB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EACjC,IAAI,EAAE,OAAO,EACb,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,aAAI,CAAC,KAAK,CAAC,aAAa,IAChC,kBAAU,CACN,CACP;gBACN,2BACI,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,IAAI,CAAC,YAAY,EACtB,SAAS,EAAC,wCAAwC,IACpD,OAAO,CAAK,CACT,CACZ,CAAC;SACL;aAAM;YACH,OAAO,IAAI,CAAC;SACf;IACL,CAAC;IACL,0BAAC;AAAD,CAAC,AA/CD,CAAkC,KAAK,CAAC,aAAa,GA+CpD;AAED,kBAAe,mBAAmB,CAAC"}

package/dist/cjs/components/header/Header_BACKUP_73021.d.ts

@@ -0,0 +1,33 @@
+export interface IHeaderProps {
+    email?: string;
+    activeOrganization: string;
+    activeStory?: string;
+    hideStoryPicker?: boolean;
+    hideOrgPicker?: boolean;
+    onOrganizationChange?: (orgId: any) => any;
+    onStoryChange?: (story: any) => any;
+    logout: (...args: any[]) => any;
+    additionalButtons?: any[];
+    auth: any;
+    story: any;
+    baseUrl: any;
+    hideDocs?: boolean;
+    showFTLogo?: boolean;
+}
+export interface IHeaderState {
+    inactiveOrganizations: any[];
+    servicesByOrganization: any[];
+    activeServiceBlob: any;
+    activeOrganizationBlob: any;
+    showAccountDropdown: boolean;
+    showStoriesDropdown: boolean;
+    showServiceDropdown: boolean;
+    dropdownToggleColor: string;
+    activeFirstChar: string;
+    order: string;
+    orderDirection: string;
+    accessData: any;
+    dataLoading: boolean;
+}
+declare const _default: any;
+export default _default;

package/dist/cjs/components/header/Header_BACKUP_73021.js

@@ -0,0 +1,393 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var Dropdown_1 = __importDefault(require("../dropdown/Dropdown"));
+var ServiceIcon_1 = __importDefault(require("../service-icon/ServiceIcon"));
+var Util_1 = require("../../Util");
+var icons_1 = require("../../constants/icons");
+var react_redux_1 = require("react-redux");
+var Spinner_1 = __importDefault(require("../spinner/Spinner"));
+var lodash_1 = __importDefault(require("lodash"));
+var DataTable_1 = __importDefault(require("../data-table/DataTable"));
+var AssetsTableDateCell_1 = __importDefault(require("../assets/AssetsTableDateCell"));
+var Session_1 = __importDefault(require("../../services/Session"));
+var ImposiumHeader = /** @class */ (function (_super) {
+    __extends(ImposiumHeader, _super);
+    function ImposiumHeader(p) {
+        var _this = _super.call(this, p) || this;
+        _this.serviceToggleRef = null;
+        _this.storyToggleRef = null;
+        _this.orgsToggleRef = null;
+        _this.COLUMNS = [
+            {
+                accessor: 'name',
+                Header: 'Name',
+                width: 115,
+                minWidth: 115,
+                disableSortBy: false
+            },
+            // {
+            //     accessor: 'total_renders',
+            //     Header: 'Total Renders',
+            //     width: 60,
+            //     minWidth: 60,
+            //     maxWidth: 60,
+            //     disableSortBy: false
+            // },
+            {
+                accessor: 'last_modified_by',
+                Header: 'Last Modified By',
+                width: 60,
+                minWidth: 60,
+                maxWidth: 60,
+                disableSortBy: true
+            },
+            {
+                accessor: 'date_modified',
+                Header: 'Last Modified',
+                width: 65,
+                minWidth: 65,
+                maxWidth: 65,
+                disableSortBy: false,
+                Cell: function (cell) { return (React.createElement(AssetsTableDateCell_1.default, { cell: cell, date_created: false })); }
+            },
+            {
+                accessor: 'date_created',
+                Header: 'Created Date',
+                width: 65,
+                minWidth: 65,
+                maxWidth: 65,
+                disableSortBy: false,
+                Cell: function (cell) { return (React.createElement(AssetsTableDateCell_1.default, { cell: cell, date_created: true })); }
+            }
+        ];
+        _this.componentDidMount = function () {
+            _this.getAccessDataHandler();
+        };
+        _this.parseAccessData = function (accessData, activeOrganization) {
+            var organizations = accessData.organizations, services = accessData.services;
+            var activeOrgId = activeOrganization;
+            if (activeOrgId === 'undefined') {
+                var session = Session_1.default.getSession();
+                activeOrgId = session.organization_id;
+            }
+            var activeOrganizationBlob = activeOrgId
+                ? accessData.organizations.find(function (org) { return org.id === activeOrgId; })
+                : undefined;
+            var inactiveOrganizations = organizations.length > 1 ? organizations.filter(function (o) { return o.id !== activeOrgId; }) : [];
+            var servicesByOrganization = services && activeOrganizationBlob
+                ? services.filter(function (s) { return activeOrganizationBlob.services.includes(s.id); })
+                : [];
+            var activeServiceBlob = servicesByOrganization.length > 1
+                ? services.find(function (s) { return window.location.href.includes(s.url); })
+                : undefined;
+            var dropdownToggleColor = ImposiumHeader.DEFAULT_ACCOUNT_TOGGLE_COLOR;
+            var activeFirstChar = '';
+            if (activeOrganizationBlob && activeOrganizationBlob.hasOwnProperty('name')) {
+                dropdownToggleColor = (0, Util_1.string2HexCode)(activeOrganizationBlob.name);
+                activeFirstChar = _this.pullFirstChar(activeOrganizationBlob.name);
+            }
+            _this.setState({
+                servicesByOrganization: servicesByOrganization,
+                activeServiceBlob: activeServiceBlob,
+                inactiveOrganizations: inactiveOrganizations,
+                activeOrganizationBlob: activeOrganizationBlob,
+                dropdownToggleColor: dropdownToggleColor,
+                activeFirstChar: activeFirstChar
+            });
+        };
+        _this.changeStory = function (story) {
+            var onStoryChange = _this.props.onStoryChange;
+            if (typeof onStoryChange === 'function') {
+                onStoryChange(story);
+                _this.setState({ showStoriesDropdown: false });
+            }
+        };
+        _this.toggleAccountDropdown = function (toggle, newId) {
+            if (newId === void 0) { newId = ''; }
+            var onOrganizationChange = _this.props.onOrganizationChange;
+            if (toggle) {
+                _this.setState({ showAccountDropdown: true });
+            }
+            else {
+                _this.setState({ showAccountDropdown: false });
+                // Propagate handler if supplied (more useful in react / redux flow)
+                if (newId && onOrganizationChange) {
+                    onOrganizationChange(newId);
+                }
+                // V1 Default behavior - redirect to hub on org change
+                if (newId && !onOrganizationChange) {
+                    window.location.replace("".concat(_this.getHomeUrl(), "?organization_id=").concat(newId));
+                }
+            }
+        };
+        _this.getHomeUrl = function () {
+            var _a = window.location, hostname = _a.hostname, host = _a.host;
+            if (hostname === 'localhost') {
+                return 'http://localhost:3036';
+            }
+            else if (host.includes('.staging.')) {
+                return 'https://launchpad.staging.imposium.com';
+            }
+            else {
+                return 'https://launchpad.imposium.com';
+            }
+        };
+        _this.doLogout = function () {
+            _this.setState({ showAccountDropdown: false });
+            _this.props.logout();
+        };
+        _this.pullFirstChar = function (s) {
+            return s ? s.substring(0, 1) : '';
+        };
+        _this.renderDropdownChevron = function (toggle) {
+            return toggle ? ImposiumHeader.UP : ImposiumHeader.DOWN;
+        };
+        _this.renderServiceAnchor = function (s, activeOrganization, activeStory) { return (React.createElement("div", { className: 'anchor-wrapper', key: s.id },
+            React.createElement("a", { href: (0, Util_1.parameterizeServiceUrl)(activeOrganization, activeStory, s.url, s.id) },
+                React.createElement("div", { className: 'icon-fixed' },
+                    React.createElement(ServiceIcon_1.default, { iconName: s.icon, color: "#".concat(s.color) })),
+                s.name))); };
+        _this.getAccessDataHandler = function () {
+            var _a = _this.props, idToken = _a.auth.idToken, baseUrl = _a.baseUrl, activeOrganization = _a.activeOrganization;
+            _this.setState({ dataLoading: true });
+            Session_1.default.getAccessData(idToken, baseUrl, false, activeOrganization)
+                .then(function (res) {
+                _this.setState({ dataLoading: false, accessData: res }, function () {
+                    return _this.parseAccessData(res, activeOrganization);
+                });
+            })
+                .catch(function (e) {
+                console.error(e);
+            });
+        };
+        _this.state = {
+            inactiveOrganizations: [],
+            servicesByOrganization: [],
+            activeServiceBlob: undefined,
+            activeOrganizationBlob: undefined,
+            showAccountDropdown: false,
+            showStoriesDropdown: false,
+            showServiceDropdown: false,
+            dropdownToggleColor: ImposiumHeader.DEFAULT_ACCOUNT_TOGGLE_COLOR,
+            activeFirstChar: '',
+            order: 'date_modified',
+            orderDirection: 'desc',
+            accessData: null,
+            dataLoading: true
+        };
+        _this.serviceToggleRef = React.createRef();
+        _this.storyToggleRef = React.createRef();
+        _this.orgsToggleRef = React.createRef();
+        return _this;
+    }
+    ImposiumHeader.prototype.componentDidUpdate = function (prevProps) {
+        var _this = this;
+        var accessData = this.state.accessData;
+        var _a = this.props, activeOrganization = _a.activeOrganization, access = _a.access;
+        if (activeOrganization !== prevProps.activeOrganization) {
+            if (accessData !== null) {
+                this.parseAccessData(accessData, activeOrganization);
+            }
+            else {
+                this.getAccessDataHandler();
+            }
+        }
+        if (!lodash_1.default.isEqual(access, accessData)) {
+            this.setState({ accessData: access }, function () {
+                return _this.parseAccessData(access, activeOrganization);
+            });
+        }
+    };
+    ImposiumHeader.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, email = _a.email, activeOrganization = _a.activeOrganization, activeStory = _a.activeStory, hideStoryPicker = _a.hideStoryPicker, story = _a.story, hideOrgPicker = _a.hideOrgPicker, additionalButtons = _a.additionalButtons, showFTLogo = _a.showFTLogo, hideDocs = _a.hideDocs;
+        var _b = this.state, accessData = _b.accessData, showAccountDropdown = _b.showAccountDropdown, servicesByOrganization = _b.servicesByOrganization, activeServiceBlob = _b.activeServiceBlob, showStoriesDropdown = _b.showStoriesDropdown, inactiveOrganizations = _b.inactiveOrganizations, activeOrganizationBlob = _b.activeOrganizationBlob, activeFirstChar = _b.activeFirstChar, dropdownToggleColor = _b.dropdownToggleColor, showServiceDropdown = _b.showServiceDropdown, order = _b.order, orderDirection = _b.orderDirection, dataLoading = _b.dataLoading;
+        var currentStory;
+        var headerBorder;
+        var activeService;
+        var serviceDropdownColor = {};
+        var serviceAnchors;
+        var privateAnchors;
+        var accountDropdownToggle;
+        var activePanel;
+        var storyToggle = !hideStoryPicker ? React.createElement(Spinner_1.default, null) : null;
+        var orgPicker;
+        var storyMenuInner = (React.createElement("div", { className: 'no-stories-dialog' }, ImposiumHeader.NO_STORIES_COPY));
+        var serviceDropdownToggle;
+        var serviceDropdownMenu;
+        var btnLogout = (React.createElement("button", { className: 'btn-logout', onClick: function () { return _this.doLogout(); } }, ImposiumHeader.LOGOUT_COPY));
+        if (accessData) {
+            activeService = servicesByOrganization.find(function (s) {
+                return window.location.href.includes(s.url);
+            });
+            if (activeService) {
+                serviceDropdownColor = { color: "#".concat(activeService.color) };
+                headerBorder = { borderBottom: "4px solid #".concat(activeService.color) };
+            }
+            serviceAnchors = servicesByOrganization
+                .filter(function (s) { return !s.private && ImposiumHeader.PRIVATE_IDS.indexOf(s.id) === -1; })
+                .map(function (s) { return _this.renderServiceAnchor(s, activeOrganization, activeStory); });
+            privateAnchors = servicesByOrganization
+                .filter(function (s) { return !s.private && ImposiumHeader.PRIVATE_IDS.indexOf(s.id) > -1; })
+                .map(function (s) { return _this.renderServiceAnchor(s, activeOrganization, activeStory); });
+            var docsSection = !hideDocs ? (React.createElement("section", { className: 'service-menu-section' },
+                React.createElement("div", { className: 'service-menu-heading' }, ImposiumHeader.DOCS_HEADER),
+                React.createElement("div", { className: 'service-menu-anchors' },
+                    React.createElement("div", { className: 'anchor-wrapper doc' },
+                        React.createElement("a", { target: '__blank', href: ImposiumHeader.API_DOCS_LINK },
+                            React.createElement("div", { className: 'icon-fixed' },
+                                React.createElement(ServiceIcon_1.default, { iconName: 'FaCogs' })),
+                            ImposiumHeader.API_DOCS_LINK_COPY)),
+                    React.createElement("div", { className: 'anchor-wrapper doc' },
+                        React.createElement("a", { target: '__blank', href: ImposiumHeader.SDK_DOCS_LINK },
+                            React.createElement("div", { className: 'icon-fixed' },
+                                React.createElement(ServiceIcon_1.default, { iconName: 'FaJsSquare' })),
+                            ImposiumHeader.SDK_DOCS_LINK_COPY))))) : null;
+            serviceDropdownMenu = (React.createElement("div", { className: 'service-menu' },
+                React.createElement("section", { className: 'service-menu-section' },
+                    React.createElement("div", { className: 'service-menu-heading' }, ImposiumHeader.SERVICE_MESH_ALIAS),
+                    React.createElement("div", { className: 'service-menu-anchors' }, serviceAnchors)),
+                privateAnchors.length > 0 && (React.createElement("section", { className: 'service-menu-section' },
+                    React.createElement("div", { className: 'service-menu-heading' }, ImposiumHeader.PRIVATE_HEADER),
+                    React.createElement("div", { className: 'service-menu-anchors' }, privateAnchors))),
+                docsSection));
+            serviceDropdownToggle = (React.createElement("button", { id: 'btn-toggle-services', className: 'btn-toggle-services', style: serviceDropdownColor, ref: this.serviceToggleRef, onClick: function () {
+                    return _this.setState({ showServiceDropdown: !_this.state.showServiceDropdown });
+                } },
+                React.createElement("span", null, activeServiceBlob
+                    ? activeServiceBlob.name
+                    : ImposiumHeader.SERVICE_MESH_ALIAS),
+                this.renderDropdownChevron(showServiceDropdown)));
+            accountDropdownToggle = !hideOrgPicker ? (React.createElement("button", { id: 'btn-toggle-orgs', className: 'btn-toggle-orgs', ref: this.orgsToggleRef, style: { backgroundColor: dropdownToggleColor }, onClick: function () { return _this.toggleAccountDropdown(!showAccountDropdown); } }, activeFirstChar)) : (btnLogout);
+        }
+        if (accessData && activeOrganizationBlob) {
+            activePanel = (React.createElement("div", { className: 'orgs-menu-active-org' },
+                React.createElement("div", { className: 'active-first-char', style: { backgroundColor: dropdownToggleColor } }, this.pullFirstChar(activeOrganizationBlob.name)),
+                React.createElement("div", null, activeOrganizationBlob.name)));
+        }
+        if (accessData && accessData.organizations && accessData.organizations.length === 0) {
+            storyToggle = null;
+        }
+        if (accessData && activeOrganizationBlob && !hideStoryPicker) {
+            currentStory = activeOrganizationBlob.stories.find(function (s) { return s.id === activeStory; });
+            storyToggle = (React.createElement("button", { id: 'btn-toggle-story', className: 'btn-toggle-story', ref: this.storyToggleRef, onClick: function () {
+                    _this.setState({ showStoriesDropdown: !showStoriesDropdown }, function () {
+                        if (showStoriesDropdown === false)
+                            _this.getAccessDataHandler();
+                    });
+                } },
+                React.createElement("div", { className: 'story-name' }, currentStory
+                    ? currentStory.name
+                    : story
+                        ? story.name
+                        : 'Project Not Found'),
+                this.renderDropdownChevron(showStoriesDropdown)));
+            if (activeOrganizationBlob.stories.length !== 0) {
+                var sortBy = order && orderDirection
+                    ? [{ id: order, desc: orderDirection === 'desc' }]
+                    : undefined;
+                var sortedStories = lodash_1.default.orderBy(activeOrganizationBlob.stories, ['date_modified'], ['desc']);
+                storyMenuInner = (React.createElement(DataTable_1.default, { columns: this.COLUMNS, data: sortedStories, showInterstitial: dataLoading, sortBy: sortBy, noDataText: ImposiumHeader.NO_STORIES_COPY, itemsPerPage: activeOrganizationBlob.stories.length, hidePaginator: true, onRowClick: this.changeStory }));
+            }
+        }
+        if (showAccountDropdown) {
+            orgPicker = (React.createElement("div", { className: 'orgs-menu-org-picker' }, inactiveOrganizations.map(function (o) { return (React.createElement("button", { key: o.name, className: 'menu-item inactive-org-button', onClick: function () { return _this.toggleAccountDropdown(false, o.id); } },
+                React.createElement("div", { className: 'inactive-first-char', style: { backgroundColor: (0, Util_1.string2HexCode)(o.name) } }, _this.pullFirstChar(o.name)),
+                o.name)); })));
+        }
+        var logo = showFTLogo ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: 'ft-logo' }),
+            "\u00A0\u00A0|\u00A0\u00A0",
+            React.createElement("h1", { className: 'heading' }, ImposiumHeader.DEFAULT_TITLE))) : (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: 'logo' }),
+            React.createElement("h1", { className: 'heading' }, ImposiumHeader.DEFAULT_TITLE)));
+        return (React.createElement("nav", { id: 'imposium-header', className: 'imposium-header', style: headerBorder },
+            React.createElement("div", { className: 'inner-content' },
+                React.createElement("span", { className: 'inner-left' },
+                    React.createElement("div", { className: 'title' }, logo),
+                    serviceDropdownToggle),
+                React.createElement("span", { className: 'inner-right' },
+                    storyToggle,
+                    React.createElement("div", { className: 'additional-buttons' }, additionalButtons),
+                    accountDropdownToggle,
+                    React.createElement("a", { href: 'https://support.flashtalking.com/hc/en-us/sections/25515903148819-Imposium', target: '_blank' },
+                        React.createElement("div", { className: 'btn-help' }, icons_1.ICON_HELP)))),
+            React.createElement(Dropdown_1.default, { key: 'services-dropdown', position: 'bottomleft', show: showServiceDropdown, toggleRef: this.serviceToggleRef, onOutsideClick: function () { return _this.setState({ showServiceDropdown: false }); } }, serviceDropdownMenu),
+            React.createElement(Dropdown_1.default, { key: 'stories-dropdown', position: 'bottomright', show: showStoriesDropdown, toggleRef: this.storyToggleRef, onOutsideClick: function () { return _this.setState({ showStoriesDropdown: false }); } },
+                React.createElement("div", { className: 'stories-menu' }, storyMenuInner)),
+            React.createElement(Dropdown_1.default, { key: 'org-dropdown', position: 'bottomright', show: showAccountDropdown, toggleRef: this.orgsToggleRef, onOutsideClick: function () { return _this.toggleAccountDropdown(false); } },
+                React.createElement("div", { className: 'orgs-menu' },
+                    activePanel,
+                    orgPicker,
+                    React.createElement("div", { className: 'orgs-menu-footer' },
+                        React.createElement("div", { className: 'email' }, email),
+                        btnLogout)))));
+    };
+    ImposiumHeader.DEFAULT_TITLE = 'imposium';
+    ImposiumHeader.SERVICE_MESH_ALIAS = 'services';
+    ImposiumHeader.DOCS_HEADER = 'documentation';
+    ImposiumHeader.PRIVATE_HEADER = 'admin';
+    ImposiumHeader.API_DOCS_LINK_COPY = 'REST API';
+    ImposiumHeader.SDK_DOCS_LINK_COPY = 'Javascript SDK';
+    ImposiumHeader.API_DOCS_LINK = 'https://docs.imposium.com';
+    ImposiumHeader.SDK_DOCS_LINK = 'https://docs.imposium.com/js-sdk/';
+    ImposiumHeader.DEFAULT_ACCOUNT_TOGGLE_COLOR = 'royalblue';
+    ImposiumHeader.NO_STORIES_COPY = 'No stories were found';
+    ImposiumHeader.LOGOUT_COPY = 'logout';
+    ImposiumHeader.UUID_LENGTH = 36;
+    ImposiumHeader.UP = icons_1.ICON_CHEVRON_UP;
+    ImposiumHeader.DOWN = icons_1.ICON_CHEVRON_DOWN;
+    ImposiumHeader.PRIVATE_IDS = [9, 10, 11, 12];
+    return ImposiumHeader;
+}(React.PureComponent));
+var mapStateToProps = function (state) {
+    return {
+        auth: state.auth,
+        story: state.story,
+        access: state.access
+    };
+};
+exports.default = (0, react_redux_1.connect)(mapStateToProps, null)(ImposiumHeader);
+//# sourceMappingURL=Header_BACKUP_73021.js.map