@dialpad/dialtone-vue 2.35.0 → 2.36.0

package/dist/dialtone-vue.common.js

@@ -1139,6 +1139,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtDropdownList": () => (/* reexport */ dropdown_list),
   "DtDropdownSeparator": () => (/* reexport */ dropdown_separator),
   "DtGroupableInputMixin": () => (/* reexport */ GroupableMixin),
+  "DtIcon": () => (/* reexport */ icon),
   "DtInput": () => (/* reexport */ input_input),
   "DtInputGroup": () => (/* reexport */ input_group_input_group),
   "DtInputGroupMixin": () => (/* reexport */ InputGroupMixin),
@@ -1470,6 +1471,15 @@ const flushPromises = () => {
     scheduler(resolve);
   });
 };
+/**
+ * Transform a string from kebab-case to pascalCase
+ * @param string
+ * @returns {string}
+ */
+
+const kebabCaseToPascalCase = string => {
+  return string.toLowerCase().split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
+};
 /* harmony default export */ const utils = ({
   getUniqueString,
   formatMessages,
@@ -1477,7 +1487,8 @@ const flushPromises = () => {
   hasFormattedMessageOfType,
   getValidationState,
   htmlFragment,
-  flushPromises
+  flushPromises,
+  kebabCaseToPascalCase
 });
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/avatar/avatar.vue?vue&type=script&lang=js&
 //
@@ -19079,6 +19090,111 @@ var root_layout_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/root_layout/index.js
 
 
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/icon/icon.vue?vue&type=template&id=1ca37c55&
+var iconvue_type_template_id_1ca37c55_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.currentIcon,{tag:"component",class:_vm.iconSize,attrs:{"data-qa":"dt-icon"}})}
+var iconvue_type_template_id_1ca37c55_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./components/icon/icon_constants.js
+const ICON_SIZE_MODIFIERS = {
+  100: 'd-icon--size-100',
+  200: 'd-icon--size-200',
+  300: 'd-icon--size-300',
+  400: 'd-icon--size-400',
+  500: 'd-icon--size-500',
+  600: 'd-icon--size-600',
+  700: 'd-icon--size-700',
+  800: 'd-icon--size-800'
+};
+/* harmony default export */ const icon_constants = ({
+  ICON_SIZE_MODIFIERS
+});
+;// CONCATENATED MODULE: external "@dialpad/dialtone-icons"
+const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/icon/icon.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+
+/**
+ * The Icon component provides a set of glyphs and sizes to provide context your application.
+ * @see https://dialpad.design/components/icon.html
+ */
+
+/* harmony default export */ const iconvue_type_script_lang_js_ = ({
+  name: 'DtIcon',
+  props: {
+    /**
+     * The size of the icon.
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    size: {
+      type: String,
+      default: '500',
+      validator: s => Object.keys(ICON_SIZE_MODIFIERS).includes(s)
+    },
+
+    /**
+     * The icon name in kebab-case
+     */
+    name: {
+      type: String,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      dialtoneIcons: dialtone_icons_namespaceObject
+    };
+  },
+
+  computed: {
+    iconSize() {
+      return ICON_SIZE_MODIFIERS[this.size];
+    },
+
+    iconName() {
+      return kebabCaseToPascalCase(this.name);
+    },
+
+    currentIcon() {
+      return this.dialtoneIcons[this.iconName];
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/icon/icon.vue?vue&type=script&lang=js&
+ /* harmony default export */ const icon_iconvue_type_script_lang_js_ = (iconvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/icon/icon.vue
+
+
+
+
+
+/* normalize component */
+;
+var icon_component = normalizeComponent(
+  icon_iconvue_type_script_lang_js_,
+  iconvue_type_template_id_1ca37c55_render,
+  iconvue_type_template_id_1ca37c55_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const icon = (icon_component.exports);
+;// CONCATENATED MODULE: ./components/icon/index.js
+
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=96ff85ec&
 var combobox_with_popovervue_type_template_id_96ff85ec_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var inputProps = ref.inputProps;
@@ -21669,6 +21785,7 @@ var grouped_chip_component = normalizeComponent(
 
 
 
+
 
 
  /// Recipes

package/dist/dialtone-vue.umd.js

@@ -1,13 +1,13 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("vue"));
+		module.exports = factory();
 	else if(typeof define === 'function' && define.amd)
 		define([], factory);
 	else if(typeof exports === 'object')
-		exports["dialtone-vue"] = factory(require("vue"));
+		exports["dialtone-vue"] = factory();
 	else
-		root["dialtone-vue"] = factory(root["Vue"]);
-})((typeof self !== 'undefined' ? self : this), (__WEBPACK_EXTERNAL_MODULE__203__) => {
+		root["dialtone-vue"] = factory();
+})((typeof self !== 'undefined' ? self : this), () => {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -1036,14 +1036,6 @@ function applyToTag (styleElement, obj) {
 }
 
 
-/***/ }),
-
-/***/ 203:
-/***/ ((module) => {
-
-"use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE__203__;
-
 /***/ })
 
 /******/ 	});
@@ -1157,6 +1149,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtDropdownList": () => (/* reexport */ dropdown_list),
   "DtDropdownSeparator": () => (/* reexport */ dropdown_separator),
   "DtGroupableInputMixin": () => (/* reexport */ GroupableMixin),
+  "DtIcon": () => (/* reexport */ icon),
   "DtInput": () => (/* reexport */ input_input),
   "DtInputGroup": () => (/* reexport */ input_group_input_group),
   "DtInputGroupMixin": () => (/* reexport */ InputGroupMixin),
@@ -1276,9 +1269,9 @@ var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._sel
 var staticRenderFns = []
 
 
-// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
-var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__(203);
-var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_);
+;// CONCATENATED MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
+const external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue");
+var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject);
 ;// CONCATENATED MODULE: ./components/avatar/avatar_constants.js
 const AVATAR_KIND_MODIFIERS = {
   default: '',
@@ -1488,6 +1481,15 @@ const flushPromises = () => {
     scheduler(resolve);
   });
 };
+/**
+ * Transform a string from kebab-case to pascalCase
+ * @param string
+ * @returns {string}
+ */
+
+const kebabCaseToPascalCase = string => {
+  return string.toLowerCase().split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
+};
 /* harmony default export */ const utils = ({
   getUniqueString,
   formatMessages,
@@ -1495,7 +1497,8 @@ const flushPromises = () => {
   hasFormattedMessageOfType,
   getValidationState,
   htmlFragment,
-  flushPromises
+  flushPromises,
+  kebabCaseToPascalCase
 });
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/avatar/avatar.vue?vue&type=script&lang=js&
 //
@@ -19097,6 +19100,111 @@ var root_layout_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/root_layout/index.js
 
 
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/icon/icon.vue?vue&type=template&id=1ca37c55&
+var iconvue_type_template_id_1ca37c55_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.currentIcon,{tag:"component",class:_vm.iconSize,attrs:{"data-qa":"dt-icon"}})}
+var iconvue_type_template_id_1ca37c55_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./components/icon/icon_constants.js
+const ICON_SIZE_MODIFIERS = {
+  100: 'd-icon--size-100',
+  200: 'd-icon--size-200',
+  300: 'd-icon--size-300',
+  400: 'd-icon--size-400',
+  500: 'd-icon--size-500',
+  600: 'd-icon--size-600',
+  700: 'd-icon--size-700',
+  800: 'd-icon--size-800'
+};
+/* harmony default export */ const icon_constants = ({
+  ICON_SIZE_MODIFIERS
+});
+;// CONCATENATED MODULE: external "@dialpad/dialtone-icons"
+const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/icon/icon.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+
+/**
+ * The Icon component provides a set of glyphs and sizes to provide context your application.
+ * @see https://dialpad.design/components/icon.html
+ */
+
+/* harmony default export */ const iconvue_type_script_lang_js_ = ({
+  name: 'DtIcon',
+  props: {
+    /**
+     * The size of the icon.
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    size: {
+      type: String,
+      default: '500',
+      validator: s => Object.keys(ICON_SIZE_MODIFIERS).includes(s)
+    },
+
+    /**
+     * The icon name in kebab-case
+     */
+    name: {
+      type: String,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      dialtoneIcons: dialtone_icons_namespaceObject
+    };
+  },
+
+  computed: {
+    iconSize() {
+      return ICON_SIZE_MODIFIERS[this.size];
+    },
+
+    iconName() {
+      return kebabCaseToPascalCase(this.name);
+    },
+
+    currentIcon() {
+      return this.dialtoneIcons[this.iconName];
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/icon/icon.vue?vue&type=script&lang=js&
+ /* harmony default export */ const icon_iconvue_type_script_lang_js_ = (iconvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/icon/icon.vue
+
+
+
+
+
+/* normalize component */
+;
+var icon_component = normalizeComponent(
+  icon_iconvue_type_script_lang_js_,
+  iconvue_type_template_id_1ca37c55_render,
+  iconvue_type_template_id_1ca37c55_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const icon = (icon_component.exports);
+;// CONCATENATED MODULE: ./components/icon/index.js
+
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=96ff85ec&
 var combobox_with_popovervue_type_template_id_96ff85ec_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var inputProps = ref.inputProps;
@@ -21687,6 +21795,7 @@ var grouped_chip_component = normalizeComponent(
 
 
 
+
 
 
  /// Recipes