{"id":20078689,"url":"https://github.com/wpdas/angular-ws-steps","last_synced_at":"2025-10-08T10:54:22.741Z","repository":{"id":57179402,"uuid":"107043551","full_name":"wpdas/angular-ws-steps","owner":"wpdas","description":"Steps directive for AngularJS.","archived":false,"fork":false,"pushed_at":"2019-01-26T08:18:09.000Z","size":25,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-09-23T17:39:59.121Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wpdas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-15T19:44:29.000Z","updated_at":"2019-08-06T09:48:33.000Z","dependencies_parsed_at":"2022-09-14T02:10:30.360Z","dependency_job_id":null,"html_url":"https://github.com/wpdas/angular-ws-steps","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/wpdas/angular-ws-steps","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpdas%2Fangular-ws-steps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpdas%2Fangular-ws-steps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpdas%2Fangular-ws-steps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpdas%2Fangular-ws-steps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wpdas","download_url":"https://codeload.github.com/wpdas/angular-ws-steps/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpdas%2Fangular-ws-steps/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278931659,"owners_count":26070788,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T15:16:15.652Z","updated_at":"2025-10-08T10:54:22.723Z","avatar_url":"https://github.com/wpdas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Steps Directive [wsSteps]\n\nDemo: [https://wpdas.github.io/angular-ws-steps/](https://wpdas.github.io/angular-ws-steps/)\n\n- Screenshots:\n\n![Screenshot 1](https://user-images.githubusercontent.com/3761994/31696207-7efddffa-b38e-11e7-90a0-921ac3defebb.png)\n![Screenshot 2](https://user-images.githubusercontent.com/3761994/31696212-841d8756-b38e-11e7-940a-baf889fe3768.png)\n\n### Install:\n - Bower\n```\nbower install angular-ws-steps --save\n```\n\n- NPM\n```\nnpm install angular-ws-steps --save\n```\n\n### How to use:\n\nThe following files must be used:\n\n- Bower:\n``` html\n\u003clink rel=\"stylesheet\" href=\"bower_components/angular-ws-steps/src/steps.css\"\u003e\n\u003cscript src=\"bower_components/angular-ws-steps/src/steps.directive.js\"\u003e\u003c/script\u003e\n```\n- NPM:\n``` html\n\u003clink rel=\"stylesheet\" href=\"node_modules/angular-ws-steps/src/steps.css\"\u003e\n\u003cscript src=\"node_modules/angular-ws-steps/src/steps.directive.js\"\u003e\u003c/script\u003e\n```\n\nThe component can be used in the same document as many times as long as the id of the steps is different. Otherwise a warning will be issued on the console.\n\nIf the requested step is larger than the enabled step, it will not be displayed.\n\nWhen the enabled step is changed, if the current step is larger than it, the first step will be automatically selected.\n\nNote: title, ref and across parameter from step directive are optional.\n\n``` html\n\u003csteps step=\"3\" enabled-step=\"3\" id=\"idName\"\u003e\n  \u003cstep icon=\"icon_name\" title=\"title\" ref=\"idRef1\"\u003e\u003c/step\u003e\n  \u003cstep icon=\"icon_name\" title=\"title\" ref=\"idRef2\"\u003e\u003c/step\u003e\n  \u003cstep icon=\"icon_name\" title=\"title\" ref=\"idRef3\"\u003e\u003c/step\u003e\n\u003c/steps\u003e\n\n\u003cstep-content id=\"idRef1\"\u003eHTML content\u003c/step-content\u003e\n\u003cstep-content id=\"idRef2\"\u003eHTML content\u003c/step-content\u003e\n\u003cstep-content id=\"idRef3\"\u003eHTML content\u003c/step-content\u003e\n```\n\nYou can use optional parameter \"colors\" to set colors of steps in sequence: enabled-color, \ndisabled-color and enabled-icon-color. Caution, in this mode, you only can use HEX colors type. \nIf you want to use rgb, rgba or similar, use StepAPI.init() instance.\n``` html\n\u003csteps step=\"3\" enabled-step=\"3\" id=\"idName\" colors=\"#ff0000, #765fff, #0000ff\"\u003e\n  ...\n\u003c/steps\u003e\n```\n\n### Instance / Control\n- The object can be controlled using the AngularJS bind or using an instance of the StepsAPI object as in the example below:\n\n``` js\nangular.module('app', ['wsSteps'])\n.controller('AppCtrl', function(StepsAPI){\n  var myNav = new StepsAPI.init('idName');\n});\n```\n\n- Default colors:\n  enabled-color (```css #1976D2;```), disabled-color(```css rgba(0,0,0,.38)```), enabled-icon-color(```css rgba(25, 118, 210, 0.70)```).\n To change default colors inject and use StepColors object like this:\n\n ``` js\nangular.module('app', ['wsSteps'])\n.controller('AppCtrl', function(StepsAPI, StepColors) {\n\n  //(enabledColor, disabledColor, enabledIconColor)\n  var stepColors = new StepColors('#ff0000', 'rgba(180, 76, 93, 0.70)', '#0000ff');\n  var myNav = new StepsAPI.init('idName', stepColors);\n});\n```\n\nYou can made too:\n\n``` js\nangular.module('app', ['wsSteps'])\n.controller('AppCtrl', function(StepsAPI) {\n  var myNav = new StepsAPI.init('idName');\n  myNav.onReady(function() {\n    myNav.setEnabledColor('#ff0000');\n    myNav.setDisabledColor('rgba(180, 76, 93, 0.70)');\n    myNav.setEnabledIconColor('#0000ff');\n  });\n});\n```\n\n- You can pass an Object to the Step using \"across\" parameter and later, rescues it using ```\nmyNav.getStepAcrossObject(myNav.getStep());``` Something like:\n\n``` html\n\u003csteps step=\"2\" enabled-step=\"2\" id=\"idName\"\u003e\n  \u003cstep icon=\"icon_name\" title=\"title\" ref=\"idRef1\" across=\"vm.myFunction\"\u003e\u003c/step\u003e\n  \u003cstep icon=\"icon_name\" title=\"title\" ref=\"idRef2\" across=\"vm.myObject\"\u003e\u003c/step\u003e\n\u003c/steps\u003e\n\n\u003cscript\u003e\nangular.module('app', ['wsSteps'])\n.controller('AppCtrl as vm', function(StepsAPI) {\n  var vm = this;\n  vm.myFunction = function() {...};\n  vm.myObject = {name: 'User Name'};\n  \n  var myNav = new StepsAPI.init('idName');\n  myNav.onStepChange(function() {\n    console.log(myNav.getStepAcrossObject(myNav.getStep())); //Return across vm.myFunction / vm.myObject\n  };\n});\n\u003c/script\u003e\n```\n\n- To use the simple bind of AngularJS simply set the same in the desired parameter:\n\n``` html\n\u003cdiv ng-controller=\"AppCtrl as vm\"\u003e\n  \u003csteps step=\"{{vm.currentStep}}\" enabled-step=\"{{vm.currentEnabledStep}}\" id=\"idName\"\u003e\n    ...\n  \u003c/steps\u003e\n\u003c/div\u003e\n```\n\n- To control the component using StepsAPI just create an instance of it by passing the id of the html element as parameter:\n\n``` js\n.controller('AppCtrl', function(StepsAPI){\n  var myNav = new StepsAPI.init('idName');\n\n  //API events\n\n  //Shot when every component (including child objects) has been drawn. This event should only be used if immediate use of the API is required\n  myNav.onReady(function() {\n    myNav.getElement(); //HTML element being controlled.\n    myNav.getElementId(); //Element ID.\n    myNav.getTotalSteps(); //Total steps of component/directive.\n    myNav.getStep(); //Current step.\n    myNav.setStep(1); //Change to Step passed by parameter.\n    myNav.getEnabledStep(); //Current position of Enabled Step.\n    myNav.setEnabledStep(4); //Sets a new position for Enabled Step.\n    myNav.setEnabledColor('#ff0000'); //Sets enabled color.\n    myNav.setDisabledColor('rgba(180, 76, 93, 0.70)'); //Sets disabled color.\n    myNav.setEnabledIconColor('#0000ff'); //Sets enabled icon color.\n    myNav.getStepAttributes(myNav.getStep()); //Return all attributes of the requested Step (current)\n    myNav.getStepAttributes(myNav.getStep()).myParameter; //Return \"my-parameter\" from current Step (html example: \u003cstep ... my-parameter=\"value\"\u003e\u003c/step\u003e)\n    myNav.getStepAcrossObject(myNav.getStep()); //Will return any object passed on \"across\" parameter on Step (Object, Function...)\n    myNav.update() //Updates the step and enabled-step based on current value setted on HTML tag.\n  });\n\n  //When the Step is changed\n  myNav.onStepChange(function() {\n    console.log('Step Changes');\n  });\n\n  //When the Enabled Step is changed\n  myNav.onEnabledStepChange(function() {\n    console.log('Enabled Step Changes');\n  });\n\n  //When the Step can not be assigned due to the Enable Step lock.\n  myNav.onStepChangeNotAllowed(function(err) {\n    console.error(err);\n  });\n\n  //When AngularJS destroys myNav Controller (when it exits outside the Screen Context)\n  myNav.onDestroy(function() {\n    console.log('myNav was destroyed');\n    myNav = null;\n  })\n});\n```\n\n### Dependencies:\n- This component depends on the [Angular Material](https://material.angularjs.org/latest/) and its assets (icons) that must be loaded in a sequence similar to this:\n\n```html\n\u003c!-- css --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Roboto\"\u003e\n\u003clink rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Open+Sans\"\u003e\n\u003clink rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\"\u003e\n\u003clink rel=\"stylesheet\" href=\"/bower_components/angular-material/angular-material.css\"\u003e\n\n\u003c!-- js --\u003e\n\u003cscript src=\"/bower_components/angular/angular.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/bower_components/angular-aria/angular-aria.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/bower_components/angular-animate/angular-animate.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/bower_components/angular-material/angular-material.js\"\u003e\u003c/script\u003e\n```\n\n## Change Logs\n#### Version 1.1.1 - 2017-10-24\n- New API access method: getStepAcrossObject(step);\n\n#### Version 1.1.0 - 2017-10-19\n- New API access method: getStepAttributes(step);\n- New Event: onDestroy(callback);\n- Remove events automatically when the Step controller is destroyed.\n\nSee examples from API use in the above lines.\n\n## License\nLicense MIT.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwpdas%2Fangular-ws-steps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwpdas%2Fangular-ws-steps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwpdas%2Fangular-ws-steps/lists"}